/* LP A（leam-tts.jp）デザインシステム v1.0 — 2026-09-02 仕様＝ _lp_design_20260902_spec.md（WCAG実測コントラスト比つき） 信頼型・落ち着いた紺アクセント。CTAはインク黒ベタ。 ✅ 2026-09-02 江﨑さん指示によりTikTok Shopブランドカラーを採用（従来の回避判断を上書き）。 緩和策は維持＝社名明記・商標表記・非提携の明記・公認表現の禁止（lint.pyが強制） 🔴 金額表記はリンターで禁止（法定表記・料金プランの4文字列のみ例外） */ :root{ /* 面（5段。これ以上増やさない） */ --c-bg:#ffffff; --c-bg-alt:#eef1f5; --c-bg-tint:#ffe9ee; --c-bg-warm:#f1f1f2; --c-ink-fill:#161823; /* 罫 */ --c-line:#dcdfe4; --c-line-strong:#c3c8d0; /* 文字（4面すべてでAAを通る値） */ --c-text:#111215; --c-text-sub:#3a3c40; --c-text-mute:#65686d; /* 役割色（4つ。これ以外を増やさない） */ --c-accent:#E11D48; --c-accent-deep:#B01D36; --c-brand:#FE2C55; --c-ng:#45484d; --c-cta:#E11D48; --c-signal:#E11D48; /* 反転面の上でだけ使う */ --c-on-dark:#ffffff; --c-on-dark-sub:#c9ccd1; --c-on-dark-accent:#25F4EE; --c-signal-on-dark:#25F4EE; --c-th:#e4e8ec; --f-sans:'Hiragino Sans','Hiragino Kaku Gothic ProN','Yu Gothic','Noto Sans JP',sans-serif; --f-num:'Inter','Helvetica Neue',Arial,sans-serif; --w:1008px; --fixbar-h:64px; } *{box-sizing:border-box} html{-webkit-text-size-adjust:100%;scroll-behavior:smooth} body{margin:0;font-family:var(--f-sans);color:var(--c-text);background:var(--c-bg); font-size:15px;line-height:1.85;letter-spacing:.01em; padding-bottom:calc(var(--fixbar-h) + env(safe-area-inset-bottom))} /* インラインの図解SVG（viewBoxのみ指定）に実寸を与える。無いと既定の300×150や0pxで描画される */ .hero-rail,figure.fig>svg,.figsvg{width:100%;height:auto;display:block} a{color:var(--c-text)} .wrap{max-width:var(--w);margin:0 auto;padding:0 16px} p{margin:0 0 14px} .wrap>p{max-width:38em} strong{font-weight:700} .note{font-size:13px;color:var(--c-text-mute);line-height:1.75} /* ── header ── */ .hd{position:sticky;top:0;z-index:50;background:rgba(255,255,255,.96); backdrop-filter:saturate(180%) blur(8px);border-bottom:1px solid var(--c-line)} .hd .wrap{display:flex;align-items:center;justify-content:space-between;height:56px;gap:12px} .bd{font-family:var(--f-num);font-weight:800;font-size:19px;letter-spacing:.06em;line-height:1.1} .hd nav{display:none;gap:18px;font-size:13px} .hd nav a{color:var(--c-text-sub);text-decoration:none;white-space:nowrap} /* ── P1 章ヘッダ ── */ section{padding-block:64px} .eyebrow{font-family:var(--f-num);font-size:11px;font-weight:700;letter-spacing:.16em; color:var(--c-accent-deep);margin:0} h2{text-wrap:balance;font-size:27px;font-weight:800;line-height:1.42;letter-spacing:-.02em;margin:10px 0 0} h2 + .bar,.h2bar{width:40px;height:3px;background:var(--c-brand);border:0;margin:14px 0 18px} h3{font-size:18px;font-weight:700;line-height:1.6;margin:26px 0 8px} .lead{font-size:16px;line-height:1.9;letter-spacing:.01em;color:var(--c-text-sub); max-width:34em;margin:0 0 22px} h1{font-size:32px;font-weight:700;line-height:1.35;letter-spacing:-.02em;margin:0 0 12px; word-break:auto-phrase} /* ── 面の割り当て ── */ .sec-alt{background:var(--c-bg-alt)} .sec-dark{background:var(--c-ink-fill);color:var(--c-on-dark);padding-block:72px} .sec-dark h2{color:var(--c-on-dark)} .sec-dark .eyebrow{color:var(--c-on-dark-accent)} .sec-dark .h2bar{background:var(--c-on-dark-accent)} .sec-dark .lead{color:var(--c-on-dark-sub)} .sec-dark p{color:var(--c-on-dark-sub)} .sec-dark .note{color:var(--c-on-dark-sub)} /* ── FV ── */ .fv{padding:16px 0 28px} .fv .sub{font-size:15px;line-height:1.75;color:var(--c-text-sub);margin:0 0 14px;max-width:34em} /* 事実ストリップ（自社の運用事実のみ。件数・割合・金額は置かない） */ .facts{display:grid;grid-template-columns:1fr 1fr 1fr;margin:0 0 14px; border:1px solid var(--c-line);border-radius:8px;overflow:hidden} /* ── ボタン ── */ .btn{display:flex;align-items:center;justify-content:center;gap:8px;width:100%; min-height:52px;padding:12px 18px;background:var(--c-cta);color:#fff; text-decoration:none;font-size:16px;font-weight:700;line-height:1.4;border-radius:8px; letter-spacing:.01em;word-break:auto-phrase;overflow-wrap:anywhere; box-shadow:0 2px 0 rgba(17,18,21,.10)} .btn:hover{background:#B01D36} .fv .note{margin:8px 0 0} /* ── P10 インラインCTA ── */ .cta-inline{position:relative;max-width:560px;margin:36px auto 0;padding-top:13px} .cta-inline::before{content:attr(data-pill);position:absolute;top:0;left:50%; transform:translateX(-50%);white-space:nowrap;background:#fff;color:var(--c-accent); border:2px solid var(--c-accent);border-radius:999px;padding:4px 14px; font-size:11.5px;font-weight:700;letter-spacing:.04em;line-height:1.4;z-index:1} .cta-inline .btn{min-height:56px} .cta-inline .note{margin:8px 0 0;text-align:center} /* ── 固定CTAバー ── */ .cta-fix{position:fixed;left:0;right:0;bottom:0;z-index:40;background:#fff; border-top:1px solid var(--c-line); padding:8px 16px calc(8px + env(safe-area-inset-bottom)); display:grid;grid-template-columns:38fr 62fr;gap:8px; transform:translateY(110%);transition:transform .24s ease} .cta-fix.is-on{transform:none} .cta-fix a{min-height:48px;display:flex;align-items:center;justify-content:center; font-size:14px;font-weight:700;border-radius:8px;text-decoration:none; line-height:1.3;text-align:center} .cta-fix .fx-sub{background:#fff;color:var(--c-text);border:1px solid var(--c-text)} .cta-fix .fx-main{background:var(--c-cta);color:#fff;white-space:nowrap; overflow:hidden;text-overflow:ellipsis;padding:0 10px} /* ── P2 スタット帯（反転面の頭）。375pxは行形式（3列だと日本語ラベルが折れて崩壊する実測） ── */ .stats{display:grid;grid-template-columns:1fr;margin:26px 0 0} /* ── P3 対比ブロック ── */ .blk{border-radius:10px;padding:18px 18px 18px 22px;margin:0 0 14px} /* ── P4 縦ステップ ── */ ol.steps{list-style:none;margin:0;padding:0;counter-reset:s} /* ── P5 カードグリッド ── */ .cards{display:grid;grid-template-columns:1fr;gap:14px;margin:0 0 16px} .card{border:1px solid var(--c-line);border-radius:10px;background:var(--c-bg-alt);padding:20px} .card h3{margin:0 0 8px;font-size:18px} .card p{font-size:15px;line-height:1.85;color:var(--c-text-sub);margin:0} /* 3職種：顔写真の円を「役割の道具」の記号に */ .person{display:flex;align-items:flex-start;gap:14px} .sec-alt .person .ph,.card .person .ph{background:#fff} /* ── P6 プランカード ── */ .plans{display:grid;grid-template-columns:1fr;gap:16px;margin:0 0 16px} .plan{position:relative;border:1px solid var(--c-line-strong);border-radius:10px;background:#fff; padding:22px 20px} .plan--reco{border:2px solid var(--c-brand);background:var(--c-bg-tint)} .plan--reco::before{content:"標準的なご契約";position:absolute;top:-13px;left:50%;transform:translateX(-50%); background:var(--c-accent);color:#fff;font-size:11.5px;font-weight:700;letter-spacing:.06em; padding:5px 16px;border-radius:999px;white-space:nowrap;box-shadow:0 4px 12px rgba(225,29,72,.3)} .plans{overflow:visible} .plan{display:flex;flex-direction:column} .plan h3{min-height:34px} .plan hr{margin:14px 0;border:0;border-top:1px solid var(--c-line-strong);width:100%} .plan h3{margin:0 0 6px} .plan hr{border:0;border-top:1px solid var(--c-line);margin:14px 0} .plan ul{list-style:none;margin:0;padding:0} .plan li{position:relative;padding-left:24px;margin-bottom:7px;font-size:15px} .plan li svg{position:absolute;left:0;top:.4em;width:16px;height:16px;color:var(--c-accent)} /* ── P7 データ図ブロック ── */ figure.fig{margin:0 0 10px;border:1px solid var(--c-line-strong);border-radius:10px; background:#fff;padding:16px} figure.fig + figcaption,.figcap{font-size:13px;color:var(--c-text-mute);line-height:1.75;margin:10px 0 0} /* 更新シグナル（1ページ1箇所のみ） */ .fresh{display:flex;align-items:center;gap:8px;font-size:14px;font-weight:700; color:var(--c-signal-on-dark);margin:18px 0 0} /* ── P8 強調ボックス ── */ .box{padding:16px 18px;margin:0 0 16px;font-size:14.5px;line-height:1.8; border-radius:0 8px 8px 0} /* ── P9 選び方ブロック ── */ .choose{list-style:none;margin:0;padding:0} /* ── 表（白カードの中でのみ使う） ── */ .tw{overflow-x:auto;-webkit-overflow-scrolling:touch;margin:0 0 12px;background:#fff; border-radius:8px;border:1px solid var(--c-line-strong);padding:4px;color:var(--c-text)} th,td{border:1px solid var(--c-line);padding:9px 11px;text-align:left;vertical-align:top;line-height:1.6} /* ── 工程アコーディオン ── */ details.proc{border-bottom:1px solid var(--c-line);padding:13px 0} /* ── FAQ ── */ details.qa{border-bottom:1px solid var(--c-line);padding:14px 0} details.qa summary{cursor:pointer;font-weight:700;font-size:15px;list-style:none} details.qa summary::before{content:"＋ ";color:var(--c-text-mute);font-family:var(--f-num)} details.qa[open] summary::before{content:"− "} details.qa p{font-size:14px;color:var(--c-text-sub);margin:10px 0 0;line-height:1.85} /* ── フォーム／お問い合わせ（反転面。フォームは白カードに） ── */ .formbox{background:#fff;border-radius:10px;padding:20px;color:var(--c-text)} .formbox .fallback{font-size:13.5px;color:var(--c-text-sub);line-height:1.8;margin:0} /* ── footer ── */ footer{padding:30px 0 40px;font-size:12.5px;color:var(--c-text-mute);background:var(--c-bg-alt)} footer a{color:var(--c-text-sub)} footer .fl{display:flex;flex-wrap:wrap;gap:14px;margin-bottom:12px} /* ── SP/PC 出し分け ── */ .only-pc{display:none} .only-sp{display:block} /* ══ PC ≥768 ══ */ @media(min-width:768px){ body{font-size:16px} .hd .wrap{height:64px} .hd nav{display:flex} section{padding-block:96px} .sec-dark{padding-block:112px} h1{font-size:44px;line-height:1.32} h2{font-size:34px} h3{font-size:20px} .eyebrow{font-size:12px} .lead{font-size:17px} .note{font-size:13.5px} .fv{padding:56px 0 48px} .fv .sub{font-size:17px;line-height:1.9} .fv .cta-row{display:flex;gap:16px;align-items:flex-start} .fv .cta-row .btn{width:320px;min-height:60px;font-size:17px} .cards{grid-template-columns:repeat(3,1fr);gap:20px} .cards--2{grid-template-columns:repeat(2,1fr)} .plans{grid-template-columns:repeat(3,1fr);gap:20px} .btn{width:auto;min-width:320px;font-size:17px} .cta-inline .btn{width:100%} .only-sp{display:none} } /* ══ 2026-09-02 v1.2：TikTokトンマナ強化（江﨑さん指摘＝FORCE-R比で画像・図解・動きが弱い／トンマナが白すぎる） ══ */ /* ── 黒ヒーローFV ── */ .fv-hero{background:var(--c-ink-fill);color:var(--c-on-dark);padding:24px 0 36px;overflow:hidden;position:relative} .fv-hero::before,.fv-hero::after{content:"";position:absolute;border-radius:50%;filter:blur(70px);opacity:.22;pointer-events:none} .fv-hero::before{width:340px;height:340px;background:#FE2C55;top:-120px;right:-80px} .fv-hero::after{width:280px;height:280px;background:#25F4EE;bottom:-120px;left:-100px;opacity:.14} .fv-hero .wrap{position:relative;z-index:1} .fv-hero h1{color:#fff} .fv-hero .sub{color:var(--c-on-dark-sub)} .fv-hero .note{color:var(--c-on-dark-sub)} .fv-hero .eyebrow{color:#25F4EE} /* ── スマホモック＋ライブコメント（スタジオ案1をそのまま移植。実UIの複製ではない） ── */ .stage{position:relative;display:flex;justify-content:center;align-items:center;min-height:540px;margin:30px 0 0} @media(min-width:768px){.stage{margin:0}} .phone{position:relative;width:250px;height:508px;background:#0B0C10;border-radius:40px; box-shadow:0 26px 60px rgba(0,0,0,.42),0 0 0 3px #2A2C33 inset;z-index:2;transform:rotate(-3deg)} .screen{position:absolute;inset:9px;border-radius:32px;overflow:hidden;background:#15161c} .notch{position:absolute;top:9px;left:50%;transform:translateX(-50%);width:92px;height:20px; background:#0B0C10;border-radius:0 0 13px 13px;z-index:6} .s-glow1,.s-glow2{position:absolute;border-radius:50%;filter:blur(34px)} .s-glow1{width:190px;height:190px;background:rgba(254,44,85,.4);top:8%;left:-16%} .s-glow2{width:210px;height:210px;background:rgba(37,244,238,.22);bottom:6%;right:-20%} .mcap i+i{margin-top:6px;width:70%} .sbar{position:absolute;bottom:66px;left:12px;right:56px;height:3px;background:rgba(255,255,255,.22);border-radius:99px;z-index:5} .sbar i{display:block;width:62%;height:100%;background:#fff;border-radius:99px} .pmeta i+i{margin-top:5px;width:60%;background:#E6E7EA} /* 浮遊カード（モーダル風） */ .floatc{position:absolute;background:#fff;border:1px solid #E6E7EB;border-radius:12px; box-shadow:0 14px 34px rgba(10,12,20,.28);padding:11px 13px;z-index:3;font-size:11.5px;line-height:1.5} /* ライブコメント */ .cstream{position:absolute;left:10px;right:52px;bottom:96px;z-index:5;pointer-events:none} .cmt{display:flex;gap:7px;align-items:flex-start;background:rgba(10,11,16,.55); border-radius:999px 14px 14px 999px;padding:4px 12px 4px 4px;margin-top:6px; opacity:0;transform:translateY(14px);width:fit-content;max-width:100%} .cmt .av{flex:none;width:22px;height:22px;border-radius:50%} .cmt .av.a1{background:linear-gradient(135deg,#F3A7B5,#E8324A)} .cmt .av.a2{background:linear-gradient(135deg,#8EE8E4,#0E7490)} .cmt .av.a3{background:linear-gradient(135deg,#F7C58B,#C2203A)} .cmt p{margin:0;font-size:9.5px;line-height:1.45;color:#fff} .cmt p b{display:block;font-size:8.5px;color:#FF8DA0;font-weight:700} .hearts{position:absolute;right:8px;bottom:150px;width:40px;height:170px;z-index:4;pointer-events:none} .imgnote{position:absolute;right:10px;bottom:4px;z-index:7;font-size:8px;color:rgba(255,255,255,.55)} @media (prefers-reduced-motion: no-preference){ .cmt.c1{animation:cmtin 9s 0s ease-in-out infinite} .cmt.c2{animation:cmtin 9s 1.6s ease-in-out infinite} @keyframes cmtin{0%{opacity:0;transform:translateY(14px)}4%,52%{opacity:1;transform:translateY(0)}62%,100%{opacity:0;transform:translateY(-10px)}} @keyframes soldin{0%,48%{opacity:0;transform:scale(.8)}53%,88%{opacity:1;transform:scale(1)}95%,100%{opacity:0;transform:scale(.9)}} @keyframes hrise{0%{opacity:0;transform:translate(-50%,0) scale(.7)}12%{opacity:.95} 60%{opacity:.75;transform:translate(calc(-50% + 10px),-90px) scale(1.05) rotate(10deg)} 100%{opacity:0;transform:translate(calc(-50% - 6px),-160px) scale(.9) rotate(-8deg)}} } @media (prefers-reduced-motion: reduce){.cmt,.soldc{opacity:1;transform:none}.hearts{display:none}} @media(min-width:768px){ .fv-hero{padding:64px 0 72px} .fv-hero .hero-grid{display:grid;grid-template-columns:1fr 380px;gap:48px;align-items:center} } /* ── スクロール連動リビール ── */ @media (prefers-reduced-motion: no-preference){ .rv{opacity:0;transform:translateY(16px);transition:opacity .5s ease,transform .5s ease} .rv.in{opacity:1;transform:none} .h2bar{transform:scaleX(0);transform-origin:left;transition:transform .5s .1s ease} .in .h2bar,.h2bar.in{transform:scaleX(1)} .btn{transition:transform .18s ease,box-shadow .18s ease,background .18s ease} .btn:hover{transform:translateY(-2px);box-shadow:0 6px 16px rgba(225,29,72,.35)} } /* ══ v1.3（FB反映版）：純黒FV・グリッチ・フィード切替・サイクル図解 ══ */ .fv-hero{background-color:#000;background-image:radial-gradient(1100px 560px at 72% -8%,#1c1420 0%,#0c0c10 46%,#000 100%)} .glitch{position:relative;display:inline-block;color:#fff; text-shadow:-3px -2px 0 #25F4EE, 3px 2px 0 #FE2C55} @media (prefers-reduced-motion: no-preference){ .glitch{animation:glitchshift 5s steps(1) infinite} @keyframes glitchshift{ 0%,92%{text-shadow:-3px -2px 0 #25F4EE,3px 2px 0 #FE2C55} 93%{text-shadow:-5px -1px 0 #25F4EE,5px 1px 0 #FE2C55} 94.5%{text-shadow:-2px -3px 0 #25F4EE,2px 3px 0 #FE2C55} 96%{text-shadow:-4px -2px 0 #25F4EE,4px 2px 0 #FE2C55} 97.5%,100%{text-shadow:-3px -2px 0 #25F4EE,3px 2px 0 #FE2C55} } } /* FVタグ（ピル2種：白枠＋シアン枠） */ .fv-tags{display:flex;gap:10px;flex-wrap:wrap;margin:14px 0 16px} .ptag{display:inline-flex;align-items:center;font-size:12.5px;font-weight:700; border-radius:999px;padding:7px 18px;line-height:1.4} .ptag--c{border:1.5px solid #25F4EE;color:#25F4EE} .fv-hero h1{font-size:38px;line-height:1.28;font-weight:900;margin:0 0 6px} .fv-hero .h1sub{font-size:17px;font-weight:700;color:#fff;line-height:1.7;margin:0 0 14px} .fv-hero .sub{font-size:15px} /* フィード切替（LIVE→ショート動画） */ .feed{position:absolute;inset:0;height:300%} .scene{position:relative;height:33.333%;overflow:hidden} .sc-live{background:#15161c} .sc-short{background:#101318} @media (prefers-reduced-motion: no-preference){ .feed{animation:feedscroll 13s cubic-bezier(.7,0,.3,1) infinite} @keyframes feedscroll{0%,40%{transform:translateY(0)}48%,88%{transform:translateY(-33.333%)}96%,100%{transform:translateY(-66.666%)}} } .prodart{position:absolute;left:50%;top:47%;transform:translate(-50%,-50%)} .prodart .glowpad{position:absolute;left:50%;top:58%;transform:translate(-50%,-50%);width:170px;height:170px; border-radius:50%;background:radial-gradient(circle,rgba(254,44,85,.32),transparent 65%)} .sc-short .prodart .glowpad{background:radial-gradient(circle,rgba(37,244,238,.25),transparent 65%)} .prodart svg{position:relative;display:block} /* 外側モーダル（散開配置） */ .xcmt{position:absolute;z-index:4;display:flex;gap:9px;align-items:center; background:rgba(16,17,24,.78);border:1px solid rgba(254,44,85,.35);border-radius:999px 16px 16px 999px; padding:6px 16px 6px 6px;box-shadow:0 10px 30px rgba(0,0,0,.5),0 0 24px rgba(254,44,85,.14);opacity:0} .xcmt .av{flex:none;width:30px;height:30px;border-radius:50%} .xcmt .av.a1{background:linear-gradient(135deg,#F3A7B5,#E8324A)} .xcmt .av.a2{background:linear-gradient(135deg,#8EE8E4,#0E7490)} .xcmt .av.a3{background:linear-gradient(135deg,#F7C58B,#C2203A)} .xcmt p{margin:0;font-size:12px;line-height:1.4;color:#fff;white-space:nowrap} .xcmt p b{display:block;font-size:10px;color:#FF8DA0} .xc1{left:max(0px,calc(50% - 308px));top:66px} .xc2{left:max(-6px,calc(50% - 326px));top:206px} .xc3{right:max(-4px,calc(50% - 322px));top:288px} .xsold{position:absolute;left:max(0px,calc(50% - 300px));bottom:86px;z-index:4;display:flex;gap:9px;align-items:center; background:#fff;border-radius:12px;padding:9px 15px;box-shadow:0 16px 40px rgba(0,0,0,.5)} .xsold p{margin:0;font-size:12px;font-weight:800;color:#17181C;line-height:1.4} .fvpts i{position:absolute;border-radius:50%;z-index:1} .fvpts i:nth-child(1){width:8px;height:8px;background:#FE2C55;left:8%;top:16%;box-shadow:0 0 14px #FE2C55} .fvpts i:nth-child(2){width:5px;height:5px;background:#25F4EE;left:44%;top:6%;box-shadow:0 0 12px #25F4EE} .fvpts i:nth-child(3){width:6px;height:6px;background:#FE2C55;right:5%;top:56%;box-shadow:0 0 12px #FE2C55} .fvpts i:nth-child(4){width:4px;height:4px;background:#25F4EE;left:22%;bottom:12%;box-shadow:0 0 10px #25F4EE} /* SVGハート上昇（絵文字廃止） */ .hearts svg{position:absolute;bottom:0;left:50%;width:16px;height:16px;opacity:0;fill:#FE2C55} .hearts svg:nth-child(2){fill:#25F4EE;width:12px;height:12px} .hearts svg:nth-child(3){width:19px;height:19px} @media (prefers-reduced-motion: no-preference){ .fv-hero .eyebrow,.fv-hero .fv-tags,.fv-hero h1,.fv-hero .h1sub,.fv-hero .sub,.fv-hero .facts,.fv-hero .cta-row,.fv-hero .note{ opacity:0;transform:translateY(18px);animation:stagein .65s cubic-bezier(.22,1,.36,1) forwards} .fv-hero .fv-tags{animation-delay:.08s} .fv-hero h1{animation-delay:.14s} .fv-hero .h1sub{animation-delay:.22s} .fv-hero .sub{animation-delay:.3s} .fv-hero .cta-row{animation-delay:.54s} .fv-hero .note{animation-delay:.64s} @keyframes stagein{to{opacity:1;transform:none}} .fv-hero .phone{opacity:0;transform:rotate(-4deg) translateY(70px);animation:phonein .9s .35s cubic-bezier(.22,1,.36,1) forwards} @keyframes phonein{to{opacity:1;transform:rotate(-4deg) translateY(0)}} .xcmt.xc1{animation:xin 10s .6s ease-in-out infinite} .xcmt.xc2{animation:xin 10s 3.4s ease-in-out infinite} .xcmt.xc3{animation:xin 10s 6.2s ease-in-out infinite} @keyframes xin{0%{opacity:0;transform:translateY(18px) scale(.92)} 5%,32%{opacity:1;transform:translateY(0) scale(1)}40%,100%{opacity:0;transform:translateY(-14px) scale(.96)}} .xsold{animation:mkfloat 5.4s 1.2s ease-in-out infinite} .fvpts i{animation:mkblink 3s ease-in-out infinite} .fvpts i:nth-child(2){animation-delay:.8s}.fvpts i:nth-child(3){animation-delay:1.6s} .hearts svg:nth-child(1){animation:hrise2 3.8s .3s ease-in infinite} .hearts svg:nth-child(2){animation:hrise2 3.8s 1.5s ease-in infinite} .hearts svg:nth-child(3){animation:hrise2 3.8s 2.4s ease-in infinite} @keyframes hrise2{0%{opacity:0;transform:translate(-50%,0) scale(.7)}12%{opacity:.95} 60%{opacity:.75;transform:translate(calc(-50% + 10px),-90px) scale(1.05) rotate(10deg)} 100%{opacity:0;transform:translate(calc(-50% - 6px),-160px) scale(.9) rotate(-8deg)}} } @media (prefers-reduced-motion: reduce){.xcmt{opacity:1}.hearts{display:none}} /* お悩みカード（7枚目ワイド） */ .worries{display:grid;grid-template-columns:1fr;gap:14px;margin:0 0 8px;padding:0;list-style:none} .worry{background:#fff;border:1px solid var(--c-line-strong);border-radius:12px;padding:18px 20px; display:flex;gap:14px;align-items:flex-start} .worry p{margin:0;font-size:15px;font-weight:700;line-height:1.7} .worry.wide{background:var(--c-ink-fill);border-color:var(--c-ink-fill)} .worry.wide p{color:#fff} .worry.wide .wsub{display:block;font-size:13px;font-weight:400;color:#c9ccd1;margin-top:4px} @media(min-width:768px){ .worries{grid-template-columns:repeat(2,1fr);gap:18px} .worry.wide{grid-column:1 / -1} } /* サイクル図解（サービスの流れ・FB-14） */ .cycle{display:grid;grid-template-columns:1fr;gap:12px;counter-reset:cyc;margin:8px 0 0} .cyc:nth-child(even) svg{color:#0E7490} @media (prefers-reduced-motion: no-preference){ @keyframes mkfadein{to{opacity:1}} } /* ===== v1.4 実画面忠実モック＋LEAM HP風図解＋カーソル演出 ===== */ /* --- LIVEシーン：上部バー --- */ .lv-top{position:absolute;top:10px;left:8px;right:8px;display:flex;align-items:center;gap:5px;z-index:5} .lv-host{display:flex;align-items:center;gap:5px;background:rgba(0,0,0,.45);border-radius:999px;padding:3px 5px 3px 3px;backdrop-filter:blur(4px)} .lv-host .av{width:20px;height:20px;margin:0} .lv-name{color:#fff;font-size:8px;font-weight:700;line-height:1.15;letter-spacing:.02em} .lv-follow{background:#FE2C55;color:#fff;font-size:8px;font-weight:700;border-radius:999px;padding:3px 8px;border:0;line-height:1} .lv-eye{margin-left:auto;background:rgba(0,0,0,.45);color:#fff;font-size:8px;border-radius:999px;padding:4px 7px;display:flex;align-items:center;gap:3px} .lv-eye svg{width:9px;height:9px;fill:none;stroke:#fff;stroke-width:1.6} .lv-x{color:rgba(255,255,255,.85);font-size:11px;line-height:1;padding:2px} .lv-badgechip{position:absolute;top:38px;left:8px;background:linear-gradient(90deg,#FE2C55,#ff5c7e);color:#fff;font-size:7.5px;font-weight:700;border-radius:4px;padding:2px 6px;z-index:5;display:flex;align-items:center;gap:3px} /* --- LIVEシーン：商品ポップアップ（カート導線） --- */ .lv-pop{position:absolute;left:8px;bottom:48px;width:168px;background:#fff;border-radius:10px;padding:7px;z-index:6; box-shadow:0 8px 24px rgba(0,0,0,.4);display:flex;gap:7px;align-items:stretch} .pp-no{position:absolute;top:-6px;left:-4px;background:#111215;color:#fff;font-size:7.5px;font-weight:800;border-radius:4px;padding:2px 5px} .pp-th{flex:0 0 44px;height:44px;border-radius:7px;background:#FDEBEF;display:flex;align-items:center;justify-content:center;overflow:hidden} .pp-th svg{width:30px;height:34px} .pp-body{flex:1;min-width:0;display:flex;flex-direction:column} .pp-name{font-size:8px;font-weight:700;color:#111215;line-height:1.25;white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .pp-meta{font-size:6.5px;color:#9a9ea6;margin-top:1px} .pp-row{display:flex;align-items:center;justify-content:space-between;margin-top:auto;gap:4px} .pp-price{color:#FF5B22;font-weight:800;font-size:11px;font-family:var(--f-num)} .pp-price small{font-size:7px;font-weight:700} .pp-buy{background:#FE2C55;color:#fff;font-size:8.5px;font-weight:800;border-radius:6px;padding:4px 7px;line-height:1;white-space:nowrap;flex:0 0 auto} /* --- LIVEシーン：下部バー（カート） --- */ .lv-bottom{position:absolute;bottom:8px;left:8px;right:8px;display:flex;align-items:center;gap:6px;z-index:6} .lv-cart{position:relative;flex:0 0 30px;height:30px;border-radius:50%;background:rgba(255,255,255,.16);display:flex;align-items:center;justify-content:center;backdrop-filter:blur(3px)} .lv-cart svg{width:15px;height:15px;fill:none;stroke:#fff;stroke-width:1.7} .lv-cart b{position:absolute;top:-4px;right:-5px;background:#FACC15;color:#111215;font-size:7.5px;font-weight:800;border-radius:999px;padding:1px 4.5px;font-family:var(--f-num);line-height:1.3} .lv-in{flex:1;height:28px;border-radius:999px;background:rgba(255,255,255,.13);color:rgba(255,255,255,.72);font-size:8px;display:flex;align-items:center;padding:0 10px} .lv-ic{flex:0 0 28px;height:28px;border-radius:50%;background:rgba(255,255,255,.13);display:flex;align-items:center;justify-content:center} .lv-ic svg{width:14px;height:14px;fill:none;stroke:#fff;stroke-width:1.6} .lv-ic.pk svg{fill:#FE2C55;stroke:none} @media(prefers-reduced-motion:no-preference){ .lv-cart b{animation:mkpulse 2.4s ease-in-out infinite} .lv-pop{animation:popin 13s cubic-bezier(.22,1,.36,1) infinite} @keyframes popin{0%,3%{opacity:0;transform:translateY(14px)}7%,38%{opacity:1;transform:translateY(0)}42%,100%{opacity:1;transform:translateY(0)}} } /* --- カート追加トースト（3シーン目） --- */ .lv-toast{position:absolute;top:56px;left:50%;transform:translateX(-50%);background:rgba(17,18,21,.86);color:#fff; font-size:8px;font-weight:700;border-radius:999px;padding:6px 11px;display:flex;align-items:center;gap:5px;z-index:7;opacity:0;white-space:nowrap} .lv-toast svg{width:11px;height:11px;fill:none;stroke:#FACC15;stroke-width:1.8} @media(prefers-reduced-motion:no-preference){ .lv-toast{animation:toastin 13s ease-out infinite} @keyframes toastin{0%,72%{opacity:0;transform:translate(-50%,8px)}76%,94%{opacity:1;transform:translate(-50%,0)}98%,100%{opacity:0;transform:translate(-50%,-4px)}} } /* --- ショート動画シーン：右レール --- */ .sh-rail{position:absolute;right:6px;bottom:78px;display:flex;flex-direction:column;align-items:center;gap:11px;z-index:6} .sr-av{position:relative;width:30px;height:30px;border-radius:50%;border:1.5px solid #fff;background:linear-gradient(135deg,#25F4EE,#0E7490)} .sr-av i{position:absolute;left:50%;bottom:-6px;transform:translateX(-50%);width:13px;height:13px;border-radius:50%;background:#FE2C55;color:#fff; font-size:9px;font-weight:800;font-style:normal;display:flex;align-items:center;justify-content:center;line-height:1} .sr-it{display:flex;flex-direction:column;align-items:center;gap:2px;color:#fff;font-size:7px;font-weight:700;font-family:var(--f-num);text-shadow:0 1px 3px rgba(0,0,0,.5)} .sr-it svg{width:21px;height:21px;fill:#fff;filter:drop-shadow(0 1px 3px rgba(0,0,0,.45))} .sr-it.lk svg{fill:#FE2C55} .sr-disc{width:26px;height:26px;border-radius:50%;background:conic-gradient(#111 0 25%,#3a3c40 0 50%,#111 0 75%,#3a3c40 0);border:5px solid #1c1d22} @media(prefers-reduced-motion:no-preference){.sr-disc{animation:orbitspin 5s linear infinite}} @keyframes orbitspin{to{transform:rotate(360deg)}} /* --- ショート動画シーン：キャプション＋商品アンカー --- */ .sh-cap{position:absolute;left:9px;right:52px;bottom:46px;z-index:6;color:#fff;text-shadow:0 1px 3px rgba(0,0,0,.5)} .sh-user{font-size:9.5px;font-weight:800;letter-spacing:.02em} .sh-txt{font-size:8px;line-height:1.5;opacity:.92;margin-top:2px} .sh-txt em{font-style:normal;opacity:.7} .sh-music{display:flex;align-items:center;gap:4px;margin-top:4px;font-size:7.5px;opacity:.85} .sh-music svg{width:9px;height:9px;fill:#fff;flex:0 0 9px} .sh-music span{display:block;max-width:110px;overflow:hidden;white-space:nowrap} .sh-anchor{position:absolute;left:8px;right:52px;bottom:12px;height:28px;background:rgba(255,255,255,.97);border-radius:7px; display:flex;align-items:center;gap:5px;padding:0 7px;z-index:6;box-shadow:0 4px 14px rgba(0,0,0,.35)} .sh-anchor .ac{flex:0 0 16px;height:16px;border-radius:4px;background:#FFF3E4;display:flex;align-items:center;justify-content:center} .sh-anchor .ac svg{width:10px;height:10px;fill:none;stroke:#F59E0B;stroke-width:2} .sh-anchor p{flex:1;min-width:0;font-size:8px;font-weight:700;color:#111215;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;margin:0} .sh-anchor b{color:#FF5B22;font-size:9.5px;font-weight:800;font-family:var(--f-num);white-space:nowrap} .sh-anchor .ch{flex:0 0 auto;color:#c2c5cb;font-size:9px} /* v1.3の旧レール・旧商品カードは廃止 */ .fv-hero .rail,.fv-hero .pcard{display:none} /* --- サイクル図解：HP風（破線コネクタ＋走る点＋ゴーストナンバー） --- */ .cycwrap{position:relative} @media(min-width:860px){ @keyframes cycrun{0%{left:7%;opacity:0}6%{opacity:1}94%{opacity:1}100%{left:calc(93% - 9px);opacity:0}} } /* --- 理由カード：HP風ミニ図解 --- */ .cards--2{counter-reset:rsn} .cards--2 .card{position:relative;counter-increment:rsn;overflow:hidden} .cards--2 .card::after{content:"0" counter(rsn);position:absolute;top:10px;right:14px;font-family:var(--f-num);font-size:40px;font-weight:800; color:transparent;-webkit-text-stroke:1px var(--c-line-strong);pointer-events:none} .rdia{height:112px;margin:0 0 14px;display:flex;align-items:center;justify-content:flex-start} .rdia svg{height:108px;width:auto;max-width:calc(100% - 52px)} .rdia .lbl{font-family:var(--f-num);font-size:7.5px;letter-spacing:.14em;fill:#9a9ea6;font-weight:700} /* 01 メーター：針が回る */ .g-needle{transform-origin:70px 62px;transform:rotate(-72deg)} /* 02 バー＋ライン：伸びる・描かれる */ .g-bar{transform-origin:bottom;transform:scaleY(.08)} /* 03 軌道：破線楕円が回る・人が浮く */ .g-orbit{stroke-dasharray:5 6} @media(prefers-reduced-motion:no-preference){ @keyframes orbdash{to{stroke-dashoffset:-110}} @keyframes boby{0%,100%{transform:translateY(0)}50%{transform:translateY(-3.5px)}} } /* 04 選抜フロー：選抜サークルが描かれ、点が商品へ走る */ .g-sel{stroke-dasharray:120;stroke-dashoffset:120} .g-run{offset-path:path("M158 52 C 196 30, 232 30, 258 46");offset-distance:0;opacity:0} .rv.in .g-run{animation:grun 2.4s cubic-bezier(.45,.05,.55,.95) 1.2s infinite} @keyframes grun{0%{offset-distance:0;opacity:0}12%{opacity:1}88%{opacity:1}100%{offset-distance:100%;opacity:0}} /* --- カーソル演出（デスクトップのみ・追走リング＋クリックハート） --- */ @media(pointer:fine){ .curring{position:fixed;top:0;left:0;width:30px;height:30px;border-radius:50%;border:1.5px solid rgba(254,44,85,.55); pointer-events:none;z-index:9998;transform:translate(-50%,-50%);will-change:transform; transition:width .28s,height .28s,border-color .28s,opacity .3s;opacity:0} } @media(pointer:coarse),(prefers-reduced-motion:reduce){.curring{display:none}} @media(prefers-reduced-motion:no-preference){ @keyframes cheartup{0%{transform:translate(-50%,-50%) scale(.35);opacity:.95} 100%{transform:translate(-50%,-190%) scale(1.1) rotate(-14deg);opacity:0}} } /* --- ボタンのマグネット微動（JSから transform を与える） --- */ .btn,.fx-main{will-change:transform} /* v1.4b 補正 */ .scene .cstream{left:8px;bottom:122px} .cform{display:grid;gap:12px;margin:0 0 14px} .cform label{display:block;font-size:12.5px;font-weight:700;color:#111215} .cform input,.cform textarea{display:block;width:100%;margin-top:6px;background:#fff; border:1px solid #c2c5cb;border-radius:8px;padding:11px 12px;color:#111215;font-size:16px;font-family:inherit} .cform input::placeholder,.cform textarea::placeholder{color:#8a8f98} .cform input:focus,.cform textarea:focus{outline:2px solid #E11D48;outline-offset:1px;border-color:transparent} .cform .btn{width:100%;text-align:center;justify-content:center;margin-top:4px} .fnote{font-size:11px;color:#65686d;margin:0} /* FVグリッチハート装飾（モバイルの視覚アンカー） */ .fv-hero .hero-grid>div:first-child{position:relative} @media(prefers-reduced-motion:no-preference){ @keyframes bobf{0%,100%{transform:translateY(0) rotate(6deg)}50%{transform:translateY(-7px) rotate(2deg)}}} .formbox .fnote,.sec-dark .formbox p.fnote{color:#65686d} /* v1.4c 目視審査での修正 */ .lv-follow,.lv-eye,.lv-name{white-space:nowrap} /* モバイル：外側コメントは畳み、SOLD/レポートはphone下端の外へ */ @media(max-width:767px){ .xcmt{display:none} .xsold{left:0;bottom:-10px} .stage{margin-bottom:34px} } /* デスクトップ：phoneを拡大し、コメントをヘッダに被らない高さへ */ @media(min-width:768px){ .stage{min-height:640px} .phone{transform:scale(1.16);transform-origin:center} .fv-hero .phone{animation:none;opacity:1} .xc1{left:0;top:110px} .xc2{left:-6px;top:262px} .xc3{right:0;top:352px} .xsold{left:6px;bottom:-6px} .fv-hero h1{font-size:54px;letter-spacing:.01em} .fv-hero .h1sub{font-size:18px} } @media(min-width:768px) and (prefers-reduced-motion:no-preference){ .fv-hero .phone{opacity:0;animation:phonein2 .9s .35s cubic-bezier(.22,1,.36,1) forwards} @keyframes phonein2{from{opacity:0;transform:scale(1.16) rotate(-4deg) translateY(60px)}to{opacity:1;transform:scale(1.16) rotate(0) translateY(0)}} } /* ホスト名は実UI同様に省略表示 */ .lv-name{max-width:54px;overflow:hidden;text-overflow:ellipsis} /* 改行は意味の切れ目でだけ折る */ .h1sub span{display:inline-block} /* ===== お悩みカード：悩みが伝わるアニメイラスト ===== */ .wart{flex:0 0 76px;width:76px;height:76px;border-radius:14px;background:#FDEBEF;display:flex;align-items:center;justify-content:center} .worry.wide .wart{background:rgba(255,255,255,.1)} .wart svg{width:64px;height:64px;overflow:visible} @media(prefers-reduced-motion:no-preference){ /* 売上フラット：線が引かれ、?がポヨン */ .w-flat{stroke-dasharray:70;stroke-dashoffset:70} .rv.in .w-flat{animation:wdraw 1.2s ease-out .2s forwards} @keyframes wdraw{to{stroke-dashoffset:0}} .w-q{opacity:0;transform-origin:58px 28px} .rv.in .w-q{animation:wpop .5s cubic-bezier(.34,1.56,.64,1) 1.3s forwards} @keyframes wpop{0%{opacity:0;transform:scale(.3)}100%{opacity:1;transform:scale(1)}} /* 再生伸びない：バーが少しだけ伸びて止まる・3本目は点線のまま */ .w-b1,.w-b2{transform-origin:bottom;transform:scaleY(.15)} .rv.in .w-b1{animation:wbar .8s cubic-bezier(.22,1,.36,1) .3s forwards} .rv.in .w-b2{animation:wbar .8s cubic-bezier(.22,1,.36,1) .55s forwards} @keyframes wbar{to{transform:scaleY(1)}} /* 返事こない：打診は飛ぶが「…」が点滅するだけ */ .w-fly{stroke-dashoffset:0;animation:wfly 2.6s linear infinite} @keyframes wfly{to{stroke-dashoffset:-16}} .w-dots circle{animation:wblink 1.6s ease-in-out infinite} .w-dots circle:nth-child(2){animation-delay:.25s} .w-dots circle:nth-child(3){animation-delay:.5s} @keyframes wblink{0%,100%{opacity:.25}50%{opacity:1}} /* PRしても売れない：ハートは浮くのにカートは0 */ .w-h1{transform-origin:24px 24px;animation:wheart 2.8s ease-in-out infinite} .w-h2{transform-origin:46px 17px;animation:wheart 2.8s 1.1s ease-in-out infinite} @keyframes wheart{0%,100%{transform:translateY(0);opacity:1}50%{transform:translateY(-5px);opacity:.75}} .w-zero{animation:wshake 3.2s ease-in-out infinite;transform-origin:56px 46px} @keyframes wshake{0%,86%,100%{transform:rotate(0)}90%{transform:rotate(-8deg)}94%{transform:rotate(8deg)}} /* マッチ不明：?が浮遊・○×が交互に明滅 */ .w-q2{transform-origin:55px 20px;animation:wfloatq 3s ease-in-out infinite} @keyframes wfloatq{0%,100%{transform:translateY(0) rotate(-4deg)}50%{transform:translateY(-4px) rotate(4deg)}} .w-ok{animation:walt 3.6s ease-in-out infinite} .w-ng{animation:walt 3.6s 1.8s ease-in-out infinite} @keyframes walt{0%,45%,100%{opacity:.25}12%,30%{opacity:1}} } /* ===== HP準拠ブランド ===== */ .hd .bd{display:flex;align-items:center;gap:10px} .brand{display:flex;align-items:center;gap:9px} .brand svg{width:24px;height:auto} .brand-name{font-family:'Inter','Archivo','Helvetica Neue',sans-serif;font-weight:700;font-size:19px;letter-spacing:.065em;color:#111215} /* お悩みカード：テキストを縦中央に */ .worry{align-items:center} /* ===== 内容マッチ図解のアニメ（常時動く） ===== */ @media(prefers-reduced-motion:no-preference){ /* 01 中国→日本 */ .r1-cn{stroke-dasharray:130;stroke-dashoffset:130} @keyframes r1flow{to{stroke-dashoffset:-16}} /* 02 DBへ流れ込む */ .r2-fl{offset-path:path("M70 21 C 94 21, 102 42, 110 54");animation:r2run 2.4s ease-in infinite} .r2-fr{offset-path:path("M160 21 C 136 21, 128 42, 120 54");animation:r2run 2.4s 1.2s ease-in infinite} @keyframes r2run{0%{offset-distance:0;opacity:0}12%{opacity:1}82%{opacity:1}100%{offset-distance:100%;opacity:0}} .r2-chk{opacity:0;transform-origin:163px 52px;animation:r2chk 4.8s cubic-bezier(.34,1.56,.64,1) infinite} @keyframes r2chk{0%,55%{opacity:0;transform:scale(.4)}64%,88%{opacity:1;transform:scale(1)}96%,100%{opacity:0;transform:scale(.85)}} /* 03 名簿が増える */ .rv .r3-p{opacity:0} .rv.in .r3-p{animation:r3in .5s cubic-bezier(.34,1.56,.64,1) forwards} .rv.in .r3-1{animation-delay:.15s}.rv.in .r3-2{animation-delay:.3s}.rv.in .r3-3{animation-delay:.45s} .rv.in .r3-4{animation-delay:.6s}.rv.in .r3-5{animation-delay:.75s}.rv.in .r3-6{animation-delay:.9s}.rv.in .r3-7{animation-delay:1.05s} @keyframes r3in{from{opacity:0}to{opacity:1}} .r3-plus{transform-origin:174px 78px;animation:mkpulse 2s ease-in-out infinite} /* 04 選抜→購入 */ .r4-yen{transform-origin:145px 35px;animation:r4yen 3.2s ease-in-out infinite} @keyframes r4yen{0%,80%,100%{transform:scale(1)}88%{transform:scale(1.25)}} @keyframes r4sel{to{stroke-dashoffset:0}} @keyframes r4pulse{0%,100%{stroke-width:2.4}50%{stroke-width:3.4}} .g-box{transform-origin:273px 51px} .rv.in .g-box{animation:r4box 2.4s cubic-bezier(.34,1.56,.64,1) 1.2s infinite} @keyframes r4box{0%,88%,100%{transform:scale(1)}94%{transform:scale(1.08)}} } @media(prefers-reduced-motion:reduce){.rv .r3-p{opacity:1}} /* ===== 追従CTAを「うざくない」仕様に ===== */ /* デスクトップ：全幅バーをやめて右下のコンパクトな浮きピルに */ @media(min-width:768px){ .cta-fix{left:auto;right:22px;bottom:22px;background:transparent;border:0;padding:0; display:flex;gap:8px;transform:translateY(140%);box-shadow:none} .cta-fix.is-on{transform:none} .cta-fix a{min-height:0;border-radius:999px;box-shadow:0 10px 28px rgba(17,18,21,.22)} .cta-fix .fx-sub{padding:12px 18px;background:#fff} .cta-fix .fx-main{padding:13px 22px;font-size:14.5px} } /* モバイル：既存バーを維持しつつ影を軽く（圧迫感を減らす） */ @media(max-width:767px){ .cta-fix{box-shadow:0 -6px 18px rgba(17,18,21,.06)} } /* 黒地セクション用のインラインCTA */ .cta-inline--dark::before{background:#fff;color:#B01D36;border-color:#fff} .sec-dark .cta-inline .note{color:#c9ccd1} /* ===== データスペック：DBコンソール風 ===== */ .dspec{margin-top:26px} /* ===== 更新ループ（PDCA）図解・黒地 ===== */ .pdca{position:relative;max-width:680px;margin:30px auto 34px;padding-bottom:46px} @media(prefers-reduced-motion:no-preference){ @keyframes pdrun{to{offset-distance:100%}} @keyframes pdrot{to{transform:rotate(360deg)}} @keyframes pdglow{0%,18%,100%{border-color:rgba(37,244,238,0);box-shadow:none} 6%{border-color:rgba(37,244,238,.9);box-shadow:0 0 22px rgba(37,244,238,.25)}} } /* モバイル：縦レール版 */ /* デスクトップはループ文言をリング下に */ /* ===== レポート1スライド ===== */ .repslide{display:grid;grid-template-columns:1fr;gap:20px;align-items:center;margin:6px 0 0} .rep-list li:nth-child(5) i,.rep-list li:nth-child(6) i{background:#111215} /* ===== 選び方トグル ===== */ .choose{display:grid;gap:12px;margin:0;padding:0} /* ===== 選び方：1スライドカードグリッド ===== */ .chgrid{display:grid;grid-template-columns:1fr;gap:12px} @media(min-width:768px){.chgrid{grid-template-columns:repeat(2,1fr);gap:16px}.chc--w{grid-column:1/-1}} .chc{position:relative;background:#fff;border:1px solid var(--c-line-strong);border-radius:12px;padding:16px 18px} .chno{display:inline-block;font-family:var(--f-num);font-size:10.5px;font-weight:800;letter-spacing:.14em; color:#E11D48;border:1px solid #F0AFC0;border-radius:999px;padding:3px 10px;margin:0 0 10px} .chq2{margin:0 0 10px;font-size:15px;font-weight:800;line-height:1.55} .cha{display:flex;gap:8px;align-items:flex-start;margin:0;padding-top:10px;border-top:1px dashed var(--c-line-strong); font-size:13px;line-height:1.7;color:var(--c-text)} .cha svg{flex:0 0 16px;width:16px;height:16px;color:#E11D48;margin-top:3px} @media(prefers-reduced-motion:no-preference){ .rv .chc{opacity:0;transform:translateY(10px)} .rv.in .chc{animation:stagein .55s cubic-bezier(.22,1,.36,1) forwards} .rv.in .chc:nth-child(2){animation-delay:.1s}.rv.in .chc:nth-child(3){animation-delay:.2s} .rv.in .chc:nth-child(4){animation-delay:.3s}.rv.in .chc:nth-child(5){animation-delay:.4s} } /* ===== 導入の流れ：進捗ライン図解 ===== */ .flow5{position:relative;margin:26px 0 0;padding-top:30px} /* デスクトップ：横ステッパー */ /* モバイル：縦レール */ /* ===== アサイン4カード ===== */ .cast4{display:grid;grid-template-columns:1fr;gap:12px;counter-reset:c4} .sec-alt .c4,.c4{background:#fff;border-color:var(--c-line-strong)} /* 導入フロー：無料ゾーンをトラックに着色＋注記の間隔 */ .f5-track::before{content:"";position:absolute;left:0;top:0;bottom:0;width:40%;background:#F5C6D1} .flow5+.note,#steps .note{margin-top:20px} /* ---------- モバイル（縦レーストラック） ---------- */ /* ---------- 極小幅（〜374px）の詰め ---------- */ /* ---------- reduced motion: 全停止でも完結 ---------- */ /* judge fix: SP上マージン・PC下余白詰め */ /* ===== P2 プロジェクトボード（工程マップ） ===== */ .pm2-wrap{width:100%;max-width:1120px;margin:0 auto;padding:8px 16px 30px;box-sizing:border-box;color:#111215} .pm2-wrap *,.pm2-wrap *::before,.pm2-wrap *::after{box-sizing:border-box} /* ---- ヘッダー ---- */ .pm2-head{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:16px;flex-wrap:wrap} /* ---- ステージ ---- */ .pm2-stage{position:relative} /* ---- レール（デスクトップ=上部水平） ---- */ .pm2-rail{position:relative;height:22px;margin:0 8px 18px;z-index:1} /* ---- グリッド／カード ---- */ .pm2-grid{position:relative;z-index:1;display:grid;grid-template-columns:1fr 20px 1fr 20px 1fr 20px 1fr;align-items:stretch} /* ---- フッター（フェーズ内メーター＋バッジ） ---- */ .pm2-foot{min-height:24px;display:flex;justify-content:space-between;align-items:center;padding:0 2px} /* ---- 連結矢印 ---- */ .pm2-arr{display:flex;align-items:center;justify-content:center} /* ---- 凡例 ---- */ .pm2-legend{display:flex;gap:18px;justify-content:center;align-items:center;margin-top:30px;font-size:11px;color:#65686d;flex-wrap:wrap;position:relative;z-index:1} /* ---- スクロールリビール ---- */ .pm2-head,.pm2-rail,.pm2-legend{opacity:0;transform:translateY(12px);transition:opacity .7s cubic-bezier(.22,1,.36,1),transform .7s cubic-bezier(.22,1,.36,1)} .pm2-phase,.pm2-arr{opacity:0;transform:translateY(22px);transition:opacity .8s cubic-bezier(.22,1,.36,1),transform .8s cubic-bezier(.22,1,.36,1)} .pm2-wrap.in .pm2-head,.pm2-wrap.in .pm2-rail,.pm2-wrap.in .pm2-legend,.pm2-wrap.in .pm2-phase,.pm2-wrap.in .pm2-arr{opacity:1;transform:translateY(0)} /* ---- モバイル ---- */ /* ---- reduced motion: 全アニメ停止・完了状態の静止画で完結 ---- */ @media (prefers-reduced-motion:reduce){ .pm2-wrap,.pm2-wrap *,.pm2-wrap *::before,.pm2-wrap *::after{animation:none!important;transition:none!important} .pm2-head,.pm2-rail,.pm2-legend,.pm2-phase,.pm2-arr{opacity:1;transform:none} .pm2-chk,.pm2-dot,.pm2-sg,.pm2-lgdone{background-color:#FE2C55;border-color:#FE2C55} } /* ===== keyframes ===== */ @keyframes pm2-lv1{0%,4%{opacity:0;background-size:0% 100%,0% 100%}4.5%{opacity:1}8.8%{background-size:100% 100%,100% 100%}9.4%{opacity:1}10.3%,100%{opacity:0;background-size:100% 100%,100% 100%}} @keyframes pm2-ck1{0%,8.5%{background-color:#fff;border-color:#F0AFC0;transform:scale(1);animation-timing-function:cubic-bezier(.34,1.56,.64,1)}9%{background-color:#FE2C55;border-color:#FE2C55;transform:scale(1.3)}9.7%{transform:scale(1)}92%{background-color:#FE2C55;border-color:#FE2C55;transform:scale(1)}96%,100%{background-color:#fff;border-color:#F0AFC0;transform:scale(1)}} @keyframes pm2-tk1{0%,8.6%{stroke-dashoffset:17}9.5%{stroke-dashoffset:0}92%{stroke-dashoffset:0}96%,100%{stroke-dashoffset:17}} @keyframes pm2-row1{0%,4%{opacity:.6;transform:translateX(0)}4.6%{opacity:1;transform:translateX(3px)}9.6%{opacity:1;transform:translateX(0)}92%{opacity:1}96%,100%{opacity:.6;transform:translateX(0)}} @keyframes pm2-lv2{0%,10%{opacity:0;background-size:0% 100%,0% 100%}10.5%{opacity:1}14.8%{background-size:100% 100%,100% 100%}15.4%{opacity:1}16.3%,100%{opacity:0;background-size:100% 100%,100% 100%}} @keyframes pm2-ck2{0%,14.5%{background-color:#fff;border-color:#F0AFC0;transform:scale(1);animation-timing-function:cubic-bezier(.34,1.56,.64,1)}15%{background-color:#FE2C55;border-color:#FE2C55;transform:scale(1.3)}15.7%{transform:scale(1)}92%{background-color:#FE2C55;border-color:#FE2C55;transform:scale(1)}96%,100%{background-color:#fff;border-color:#F0AFC0;transform:scale(1)}} @keyframes pm2-tk2{0%,14.6%{stroke-dashoffset:17}15.5%{stroke-dashoffset:0}92%{stroke-dashoffset:0}96%,100%{stroke-dashoffset:17}} @keyframes pm2-row2{0%,10%{opacity:.6;transform:translateX(0)}10.6%{opacity:1;transform:translateX(3px)}15.6%{opacity:1;transform:translateX(0)}92%{opacity:1}96%,100%{opacity:.6;transform:translateX(0)}} @keyframes pm2-lv3{0%,16%{opacity:0;background-size:0% 100%,0% 100%}16.5%{opacity:1}20.8%{background-size:100% 100%,100% 100%}21.4%{opacity:1}22.3%,100%{opacity:0;background-size:100% 100%,100% 100%}} @keyframes pm2-ck3{0%,20.5%{background-color:#fff;border-color:#F0AFC0;transform:scale(1);animation-timing-function:cubic-bezier(.34,1.56,.64,1)}21%{background-color:#FE2C55;border-color:#FE2C55;transform:scale(1.3)}21.7%{transform:scale(1)}92%{background-color:#FE2C55;border-color:#FE2C55;transform:scale(1)}96%,100%{background-color:#fff;border-color:#F0AFC0;transform:scale(1)}} @keyframes pm2-tk3{0%,20.6%{stroke-dashoffset:17}21.5%{stroke-dashoffset:0}92%{stroke-dashoffset:0}96%,100%{stroke-dashoffset:17}} @keyframes pm2-row3{0%,16%{opacity:.6;transform:translateX(0)}16.6%{opacity:1;transform:translateX(3px)}21.6%{opacity:1;transform:translateX(0)}92%{opacity:1}96%,100%{opacity:.6;transform:translateX(0)}} @keyframes pm2-lv4{0%,22%{opacity:0;background-size:0% 100%,0% 100%}22.5%{opacity:1}26.8%{background-size:100% 100%,100% 100%}27.4%{opacity:1}28.3%,100%{opacity:0;background-size:100% 100%,100% 100%}} @keyframes pm2-ck4{0%,26.5%{background-color:#fff;border-color:#F0AFC0;transform:scale(1);animation-timing-function:cubic-bezier(.34,1.56,.64,1)}27%{background-color:#FE2C55;border-color:#FE2C55;transform:scale(1.3)}27.7%{transform:scale(1)}92%{background-color:#FE2C55;border-color:#FE2C55;transform:scale(1)}96%,100%{background-color:#fff;border-color:#F0AFC0;transform:scale(1)}} @keyframes pm2-tk4{0%,26.6%{stroke-dashoffset:17}27.5%{stroke-dashoffset:0}92%{stroke-dashoffset:0}96%,100%{stroke-dashoffset:17}} @keyframes pm2-row4{0%,22%{opacity:.6;transform:translateX(0)}22.6%{opacity:1;transform:translateX(3px)}27.6%{opacity:1;transform:translateX(0)}92%{opacity:1}96%,100%{opacity:.6;transform:translateX(0)}} @keyframes pm2-lv5{0%,28%{opacity:0;background-size:0% 100%,0% 100%}28.5%{opacity:1}32.8%{background-size:100% 100%,100% 100%}33.4%{opacity:1}34.3%,100%{opacity:0;background-size:100% 100%,100% 100%}} @keyframes pm2-ck5{0%,32.5%{background-color:#fff;border-color:#F0AFC0;transform:scale(1);animation-timing-function:cubic-bezier(.34,1.56,.64,1)}33%{background-color:#FE2C55;border-color:#FE2C55;transform:scale(1.3)}33.7%{transform:scale(1)}92%{background-color:#FE2C55;border-color:#FE2C55;transform:scale(1)}96%,100%{background-color:#fff;border-color:#F0AFC0;transform:scale(1)}} @keyframes pm2-tk5{0%,32.6%{stroke-dashoffset:17}33.5%{stroke-dashoffset:0}92%{stroke-dashoffset:0}96%,100%{stroke-dashoffset:17}} @keyframes pm2-row5{0%,28%{opacity:.6;transform:translateX(0)}28.6%{opacity:1;transform:translateX(3px)}33.6%{opacity:1;transform:translateX(0)}92%{opacity:1}96%,100%{opacity:.6;transform:translateX(0)}} @keyframes pm2-lv6{0%,34%{opacity:0;background-size:0% 100%,0% 100%}34.5%{opacity:1}38.8%{background-size:100% 100%,100% 100%}39.4%{opacity:1}40.3%,100%{opacity:0;background-size:100% 100%,100% 100%}} @keyframes pm2-ck6{0%,38.5%{background-color:#fff;border-color:#F0AFC0;transform:scale(1);animation-timing-function:cubic-bezier(.34,1.56,.64,1)}39%{background-color:#FE2C55;border-color:#FE2C55;transform:scale(1.3)}39.7%{transform:scale(1)}92%{background-color:#FE2C55;border-color:#FE2C55;transform:scale(1)}96%,100%{background-color:#fff;border-color:#F0AFC0;transform:scale(1)}} @keyframes pm2-tk6{0%,38.6%{stroke-dashoffset:17}39.5%{stroke-dashoffset:0}92%{stroke-dashoffset:0}96%,100%{stroke-dashoffset:17}} @keyframes pm2-row6{0%,34%{opacity:.6;transform:translateX(0)}34.6%{opacity:1;transform:translateX(3px)}39.6%{opacity:1;transform:translateX(0)}92%{opacity:1}96%,100%{opacity:.6;transform:translateX(0)}} @keyframes pm2-lv7{0%,40%{opacity:0;background-size:0% 100%,0% 100%}40.5%{opacity:1}44.8%{background-size:100% 100%,100% 100%}45.4%{opacity:1}46.3%,100%{opacity:0;background-size:100% 100%,100% 100%}} @keyframes pm2-ck7{0%,44.5%{background-color:#fff;border-color:#F0AFC0;transform:scale(1);animation-timing-function:cubic-bezier(.34,1.56,.64,1)}45%{background-color:#FE2C55;border-color:#FE2C55;transform:scale(1.3)}45.7%{transform:scale(1)}92%{background-color:#FE2C55;border-color:#FE2C55;transform:scale(1)}96%,100%{background-color:#fff;border-color:#F0AFC0;transform:scale(1)}} @keyframes pm2-tk7{0%,44.6%{stroke-dashoffset:17}45.5%{stroke-dashoffset:0}92%{stroke-dashoffset:0}96%,100%{stroke-dashoffset:17}} @keyframes pm2-row7{0%,40%{opacity:.6;transform:translateX(0)}40.6%{opacity:1;transform:translateX(3px)}45.6%{opacity:1;transform:translateX(0)}92%{opacity:1}96%,100%{opacity:.6;transform:translateX(0)}} @keyframes pm2-lv8{0%,46%{opacity:0;background-size:0% 100%,0% 100%}46.5%{opacity:1}50.8%{background-size:100% 100%,100% 100%}51.4%{opacity:1}52.3%,100%{opacity:0;background-size:100% 100%,100% 100%}} @keyframes pm2-ck8{0%,50.5%{background-color:#fff;border-color:#F0AFC0;transform:scale(1);animation-timing-function:cubic-bezier(.34,1.56,.64,1)}51%{background-color:#FE2C55;border-color:#FE2C55;transform:scale(1.3)}51.7%{transform:scale(1)}92%{background-color:#FE2C55;border-color:#FE2C55;transform:scale(1)}96%,100%{background-color:#fff;border-color:#F0AFC0;transform:scale(1)}} @keyframes pm2-tk8{0%,50.6%{stroke-dashoffset:17}51.5%{stroke-dashoffset:0}92%{stroke-dashoffset:0}96%,100%{stroke-dashoffset:17}} @keyframes pm2-row8{0%,46%{opacity:.6;transform:translateX(0)}46.6%{opacity:1;transform:translateX(3px)}51.6%{opacity:1;transform:translateX(0)}92%{opacity:1}96%,100%{opacity:.6;transform:translateX(0)}} @keyframes pm2-lv9{0%,52%{opacity:0;background-size:0% 100%,0% 100%}52.5%{opacity:1}56.8%{background-size:100% 100%,100% 100%}57.4%{opacity:1}58.3%,100%{opacity:0;background-size:100% 100%,100% 100%}} @keyframes pm2-ck9{0%,56.5%{background-color:#fff;border-color:#F0AFC0;transform:scale(1);animation-timing-function:cubic-bezier(.34,1.56,.64,1)}57%{background-color:#FE2C55;border-color:#FE2C55;transform:scale(1.3)}57.7%{transform:scale(1)}92%{background-color:#FE2C55;border-color:#FE2C55;transform:scale(1)}96%,100%{background-color:#fff;border-color:#F0AFC0;transform:scale(1)}} @keyframes pm2-tk9{0%,56.6%{stroke-dashoffset:17}57.5%{stroke-dashoffset:0}92%{stroke-dashoffset:0}96%,100%{stroke-dashoffset:17}} @keyframes pm2-row9{0%,52%{opacity:.6;transform:translateX(0)}52.6%{opacity:1;transform:translateX(3px)}57.6%{opacity:1;transform:translateX(0)}92%{opacity:1}96%,100%{opacity:.6;transform:translateX(0)}} @keyframes pm2-lv10{0%,58%{opacity:0;background-size:0% 100%,0% 100%}58.5%{opacity:1}62.8%{background-size:100% 100%,100% 100%}63.4%{opacity:1}64.3%,100%{opacity:0;background-size:100% 100%,100% 100%}} @keyframes pm2-ck10{0%,62.5%{background-color:#fff;border-color:#F0AFC0;transform:scale(1);animation-timing-function:cubic-bezier(.34,1.56,.64,1)}63%{background-color:#FE2C55;border-color:#FE2C55;transform:scale(1.3)}63.7%{transform:scale(1)}92%{background-color:#FE2C55;border-color:#FE2C55;transform:scale(1)}96%,100%{background-color:#fff;border-color:#F0AFC0;transform:scale(1)}} @keyframes pm2-tk10{0%,62.6%{stroke-dashoffset:17}63.5%{stroke-dashoffset:0}92%{stroke-dashoffset:0}96%,100%{stroke-dashoffset:17}} @keyframes pm2-row10{0%,58%{opacity:.6;transform:translateX(0)}58.6%{opacity:1;transform:translateX(3px)}63.6%{opacity:1;transform:translateX(0)}92%{opacity:1}96%,100%{opacity:.6;transform:translateX(0)}} @keyframes pm2-lv11{0%,64%{opacity:0;background-size:0% 100%,0% 100%}64.5%{opacity:1}68.8%{background-size:100% 100%,100% 100%}69.4%{opacity:1}70.3%,100%{opacity:0;background-size:100% 100%,100% 100%}} @keyframes pm2-ck11{0%,68.5%{background-color:#fff;border-color:#F0AFC0;transform:scale(1);animation-timing-function:cubic-bezier(.34,1.56,.64,1)}69%{background-color:#FE2C55;border-color:#FE2C55;transform:scale(1.3)}69.7%{transform:scale(1)}92%{background-color:#FE2C55;border-color:#FE2C55;transform:scale(1)}96%,100%{background-color:#fff;border-color:#F0AFC0;transform:scale(1)}} @keyframes pm2-tk11{0%,68.6%{stroke-dashoffset:17}69.5%{stroke-dashoffset:0}92%{stroke-dashoffset:0}96%,100%{stroke-dashoffset:17}} @keyframes pm2-row11{0%,64%{opacity:.6;transform:translateX(0)}64.6%{opacity:1;transform:translateX(3px)}69.6%{opacity:1;transform:translateX(0)}92%{opacity:1}96%,100%{opacity:.6;transform:translateX(0)}} @keyframes pm2-lv12{0%,70%{opacity:0;background-size:0% 100%,0% 100%}70.5%{opacity:1}74.8%{background-size:100% 100%,100% 100%}75.4%{opacity:1}76.3%,100%{opacity:0;background-size:100% 100%,100% 100%}} @keyframes pm2-ck12{0%,74.5%{background-color:#fff;border-color:#F0AFC0;transform:scale(1);animation-timing-function:cubic-bezier(.34,1.56,.64,1)}75%{background-color:#FE2C55;border-color:#FE2C55;transform:scale(1.3)}75.7%{transform:scale(1)}92%{background-color:#FE2C55;border-color:#FE2C55;transform:scale(1)}96%,100%{background-color:#fff;border-color:#F0AFC0;transform:scale(1)}} @keyframes pm2-tk12{0%,74.6%{stroke-dashoffset:17}75.5%{stroke-dashoffset:0}92%{stroke-dashoffset:0}96%,100%{stroke-dashoffset:17}} @keyframes pm2-row12{0%,70%{opacity:.6;transform:translateX(0)}70.6%{opacity:1;transform:translateX(3px)}75.6%{opacity:1;transform:translateX(0)}92%{opacity:1}96%,100%{opacity:.6;transform:translateX(0)}} @keyframes pm2-ph0{0%,4%{transform:translateY(0);border-color:#E4E6EA;box-shadow:0 2px 6px rgba(17,18,21,.05),0 16px 26px -20px rgba(17,18,21,.28);animation-timing-function:cubic-bezier(.34,1.56,.64,1)}5.2%{transform:translateY(-7px);border-color:#F5C6D1;box-shadow:0 6px 14px rgba(225,29,72,.07),0 26px 38px -20px rgba(225,29,72,.30)}22.4%{transform:translateY(-7px);border-color:#F5C6D1;box-shadow:0 6px 14px rgba(225,29,72,.07),0 26px 38px -20px rgba(225,29,72,.30);animation-timing-function:cubic-bezier(.22,1,.36,1)}24%,100%{transform:translateY(0);border-color:#E4E6EA;box-shadow:0 2px 6px rgba(17,18,21,.05),0 16px 26px -20px rgba(17,18,21,.28)}} @keyframes pm2-bd0{0%,21.6%{opacity:0;transform:translateY(7px) scale(.7);animation-timing-function:cubic-bezier(.34,1.56,.64,1)}22.9%{opacity:1;transform:translateY(0) scale(1)}92%{opacity:1;transform:translateY(0) scale(1)}96%,100%{opacity:0;transform:translateY(7px) scale(.7)}} @keyframes pm2-ph1{0%,22%{transform:translateY(0);border-color:#E4E6EA;box-shadow:0 2px 6px rgba(17,18,21,.05),0 16px 26px -20px rgba(17,18,21,.28);animation-timing-function:cubic-bezier(.34,1.56,.64,1)}23.2%{transform:translateY(-7px);border-color:#F5C6D1;box-shadow:0 6px 14px rgba(225,29,72,.07),0 26px 38px -20px rgba(225,29,72,.30)}40.4%{transform:translateY(-7px);border-color:#F5C6D1;box-shadow:0 6px 14px rgba(225,29,72,.07),0 26px 38px -20px rgba(225,29,72,.30);animation-timing-function:cubic-bezier(.22,1,.36,1)}42%,100%{transform:translateY(0);border-color:#E4E6EA;box-shadow:0 2px 6px rgba(17,18,21,.05),0 16px 26px -20px rgba(17,18,21,.28)}} @keyframes pm2-bd1{0%,39.6%{opacity:0;transform:translateY(7px) scale(.7);animation-timing-function:cubic-bezier(.34,1.56,.64,1)}40.9%{opacity:1;transform:translateY(0) scale(1)}92%{opacity:1;transform:translateY(0) scale(1)}96%,100%{opacity:0;transform:translateY(7px) scale(.7)}} @keyframes pm2-ph2{0%,40%{transform:translateY(0);border-color:#E4E6EA;box-shadow:0 2px 6px rgba(17,18,21,.05),0 16px 26px -20px rgba(17,18,21,.28);animation-timing-function:cubic-bezier(.34,1.56,.64,1)}41.2%{transform:translateY(-7px);border-color:#F5C6D1;box-shadow:0 6px 14px rgba(225,29,72,.07),0 26px 38px -20px rgba(225,29,72,.30)}58.4%{transform:translateY(-7px);border-color:#F5C6D1;box-shadow:0 6px 14px rgba(225,29,72,.07),0 26px 38px -20px rgba(225,29,72,.30);animation-timing-function:cubic-bezier(.22,1,.36,1)}60%,100%{transform:translateY(0);border-color:#E4E6EA;box-shadow:0 2px 6px rgba(17,18,21,.05),0 16px 26px -20px rgba(17,18,21,.28)}} @keyframes pm2-bd2{0%,57.6%{opacity:0;transform:translateY(7px) scale(.7);animation-timing-function:cubic-bezier(.34,1.56,.64,1)}58.9%{opacity:1;transform:translateY(0) scale(1)}92%{opacity:1;transform:translateY(0) scale(1)}96%,100%{opacity:0;transform:translateY(7px) scale(.7)}} @keyframes pm2-ph3{0%,58%{transform:translateY(0);border-color:#E4E6EA;box-shadow:0 2px 6px rgba(17,18,21,.05),0 16px 26px -20px rgba(17,18,21,.28);animation-timing-function:cubic-bezier(.34,1.56,.64,1)}59.2%{transform:translateY(-7px);border-color:#F5C6D1;box-shadow:0 6px 14px rgba(225,29,72,.07),0 26px 38px -20px rgba(225,29,72,.30)}91%{transform:translateY(-7px);border-color:#F5C6D1;box-shadow:0 6px 14px rgba(225,29,72,.07),0 26px 38px -20px rgba(225,29,72,.30);animation-timing-function:cubic-bezier(.22,1,.36,1)}94%,100%{transform:translateY(0);border-color:#E4E6EA;box-shadow:0 2px 6px rgba(17,18,21,.05),0 16px 26px -20px rgba(17,18,21,.28)}} @keyframes pm2-bd3{0%,75.6%{opacity:0;transform:translateY(7px) scale(.7);animation-timing-function:cubic-bezier(.34,1.56,.64,1)}76.9%{opacity:1;transform:translateY(0) scale(1)}92%{opacity:1;transform:translateY(0) scale(1)}96%,100%{opacity:0;transform:translateY(7px) scale(.7)}} @keyframes pm2-cnt{0%{transform:translateY(0)}9.6%{transform:translateY(-0px)}10.1%{transform:translateY(-20px)}15.6%{transform:translateY(-20px)}16.1%{transform:translateY(-40px)}21.6%{transform:translateY(-40px)}22.1%{transform:translateY(-60px)}27.6%{transform:translateY(-60px)}28.1%{transform:translateY(-80px)}33.6%{transform:translateY(-80px)}34.1%{transform:translateY(-100px)}39.6%{transform:translateY(-100px)}40.1%{transform:translateY(-120px)}45.6%{transform:translateY(-120px)}46.1%{transform:translateY(-140px)}51.6%{transform:translateY(-140px)}52.1%{transform:translateY(-160px)}57.6%{transform:translateY(-160px)}58.1%{transform:translateY(-180px)}63.6%{transform:translateY(-180px)}64.1%{transform:translateY(-200px)}69.6%{transform:translateY(-200px)}70.1%{transform:translateY(-220px)}75.6%{transform:translateY(-220px)}76.1%{transform:translateY(-240px)}93%{transform:translateY(-240px);animation-timing-function:cubic-bezier(.22,1,.36,1)}96.5%,100%{transform:translateY(0)}} @keyframes pm2-railh{0%,4%{transform:scaleX(0)}9.6%{transform:scaleX(0)}10.15%{transform:scaleX(0.0833)}15.6%{transform:scaleX(0.0833)}16.15%{transform:scaleX(0.1667)}21.6%{transform:scaleX(0.1667)}22.15%{transform:scaleX(0.2500)}27.6%{transform:scaleX(0.2500)}28.15%{transform:scaleX(0.3333)}33.6%{transform:scaleX(0.3333)}34.15%{transform:scaleX(0.4167)}39.6%{transform:scaleX(0.4167)}40.15%{transform:scaleX(0.5000)}45.6%{transform:scaleX(0.5000)}46.15%{transform:scaleX(0.5833)}51.6%{transform:scaleX(0.5833)}52.15%{transform:scaleX(0.6667)}57.6%{transform:scaleX(0.6667)}58.15%{transform:scaleX(0.7500)}63.6%{transform:scaleX(0.7500)}64.15%{transform:scaleX(0.8333)}69.6%{transform:scaleX(0.8333)}70.15%{transform:scaleX(0.9167)}75.6%{transform:scaleX(0.9167)}76.15%{transform:scaleX(1.0000)}92%{transform:scaleX(1);animation-timing-function:cubic-bezier(.22,1,.36,1)}96%,100%{transform:scaleX(0)}} @keyframes pm2-railv{0%,4%{transform:scaleY(0)}9.6%{transform:scaleY(0)}10.15%{transform:scaleY(0.0833)}15.6%{transform:scaleY(0.0833)}16.15%{transform:scaleY(0.1667)}21.6%{transform:scaleY(0.1667)}22.15%{transform:scaleY(0.2500)}27.6%{transform:scaleY(0.2500)}28.15%{transform:scaleY(0.3333)}33.6%{transform:scaleY(0.3333)}34.15%{transform:scaleY(0.4167)}39.6%{transform:scaleY(0.4167)}40.15%{transform:scaleY(0.5000)}45.6%{transform:scaleY(0.5000)}46.15%{transform:scaleY(0.5833)}51.6%{transform:scaleY(0.5833)}52.15%{transform:scaleY(0.6667)}57.6%{transform:scaleY(0.6667)}58.15%{transform:scaleY(0.7500)}63.6%{transform:scaleY(0.7500)}64.15%{transform:scaleY(0.8333)}69.6%{transform:scaleY(0.8333)}70.15%{transform:scaleY(0.9167)}75.6%{transform:scaleY(0.9167)}76.15%{transform:scaleY(1.0000)}92%{transform:scaleY(1);animation-timing-function:cubic-bezier(.22,1,.36,1)}96%,100%{transform:scaleY(0)}} @keyframes pm2-runh{0%{left:0%;opacity:1}4%{left:0%;animation-timing-function:cubic-bezier(.34,1.56,.64,1)}4.7%{left:4.17%}10%{left:4.17%;animation-timing-function:cubic-bezier(.34,1.56,.64,1)}10.7%{left:12.50%}16%{left:12.50%;animation-timing-function:cubic-bezier(.34,1.56,.64,1)}16.7%{left:20.83%}22%{left:20.83%;animation-timing-function:cubic-bezier(.34,1.56,.64,1)}22.7%{left:29.17%}28%{left:29.17%;animation-timing-function:cubic-bezier(.34,1.56,.64,1)}28.7%{left:37.50%}34%{left:37.50%;animation-timing-function:cubic-bezier(.34,1.56,.64,1)}34.7%{left:45.83%}40%{left:45.83%;animation-timing-function:cubic-bezier(.34,1.56,.64,1)}40.7%{left:54.17%}46%{left:54.17%;animation-timing-function:cubic-bezier(.34,1.56,.64,1)}46.7%{left:62.50%}52%{left:62.50%;animation-timing-function:cubic-bezier(.34,1.56,.64,1)}52.7%{left:70.83%}58%{left:70.83%;animation-timing-function:cubic-bezier(.34,1.56,.64,1)}58.7%{left:79.17%}64%{left:79.17%;animation-timing-function:cubic-bezier(.34,1.56,.64,1)}64.7%{left:87.50%}70%{left:87.50%;animation-timing-function:cubic-bezier(.34,1.56,.64,1)}70.7%{left:95.83%}76%{left:95.83%;animation-timing-function:cubic-bezier(.34,1.56,.64,1)}76.8%{left:100%}92%{left:100%;opacity:1}94%{opacity:0}95.5%{left:100%}96.5%{left:0%;opacity:0}99%,100%{left:0%;opacity:1}} @keyframes pm2-runv{0%{top:0%;opacity:1}4%{top:0%;animation-timing-function:cubic-bezier(.34,1.56,.64,1)}4.7%{top:4.17%}10%{top:4.17%;animation-timing-function:cubic-bezier(.34,1.56,.64,1)}10.7%{top:12.50%}16%{top:12.50%;animation-timing-function:cubic-bezier(.34,1.56,.64,1)}16.7%{top:20.83%}22%{top:20.83%;animation-timing-function:cubic-bezier(.34,1.56,.64,1)}22.7%{top:29.17%}28%{top:29.17%;animation-timing-function:cubic-bezier(.34,1.56,.64,1)}28.7%{top:37.50%}34%{top:37.50%;animation-timing-function:cubic-bezier(.34,1.56,.64,1)}34.7%{top:45.83%}40%{top:45.83%;animation-timing-function:cubic-bezier(.34,1.56,.64,1)}40.7%{top:54.17%}46%{top:54.17%;animation-timing-function:cubic-bezier(.34,1.56,.64,1)}46.7%{top:62.50%}52%{top:62.50%;animation-timing-function:cubic-bezier(.34,1.56,.64,1)}52.7%{top:70.83%}58%{top:70.83%;animation-timing-function:cubic-bezier(.34,1.56,.64,1)}58.7%{top:79.17%}64%{top:79.17%;animation-timing-function:cubic-bezier(.34,1.56,.64,1)}64.7%{top:87.50%}70%{top:87.50%;animation-timing-function:cubic-bezier(.34,1.56,.64,1)}70.7%{top:95.83%}76%{top:95.83%;animation-timing-function:cubic-bezier(.34,1.56,.64,1)}76.8%{top:100%}92%{top:100%;opacity:1}94%{opacity:0}95.5%{top:100%}96.5%{top:0%;opacity:0}99%,100%{top:0%;opacity:1}} @keyframes pm2-spin{to{transform:rotate(360deg)}} @keyframes pm2-blink{0%,100%{opacity:1;transform:scale(1)}50%{opacity:.35;transform:scale(.75)}} @keyframes pm2-flow{0%{opacity:.2;border-color:#F5C6D1;transform:translateX(-2px) rotate(-45deg)}45%{opacity:1;border-color:#FE2C55;transform:translateX(2px) rotate(-45deg)}100%{opacity:.2;border-color:#F5C6D1;transform:translateX(5px) rotate(-45deg)}} @keyframes pm2-drift{to{background-position:44px 0,0 0,0 0}} @keyframes pm2-pulse{0%{box-shadow:0 0 0 0 rgba(254,44,85,.45)}70%,100%{box-shadow:0 0 0 9px rgba(254,44,85,0)}} /* ===== ワイド画面：FVを広く呼吸させる（中央ぎゅうぎゅう対策） ===== */ @media(min-width:1200px){ .fv-hero .wrap{max-width:1280px} .fv-hero .hero-grid{grid-template-columns:1fr 480px;gap:96px} .fv-hero{padding:56px 0 64px} .fv-hero h1{font-size:60px} .stage{min-height:680px} .phone{transform:scale(1.24)} @media(prefers-reduced-motion:no-preference){ @keyframes phonein2{from{opacity:0;transform:scale(1.24) rotate(-4deg) translateY(60px)}to{opacity:1;transform:scale(1.24) rotate(0) translateY(0)}} } /* 外側モーダルをより外へ拡散 */ .xc1{left:-52px;top:104px} .xc2{left:-40px;top:276px} .xc3{right:-16px;top:368px} .xsold{left:-10px;bottom:-10px} .fvpts i:nth-child(1){left:4%} .fvpts i:nth-child(4){right:2%} } @media(min-width:1500px){ .fv-hero .wrap{max-width:1380px} .fv-hero .hero-grid{gap:130px} } /* wideお悩みカードの右空白→導線に */ .wcta{display:none} @media(min-width:768px){ .worry.wide{align-items:center} .wcta{display:inline-flex;align-items:center;margin-left:auto;flex:0 0 auto; background:#E11D48;color:#fff;font-size:14px;font-weight:800;border-radius:999px; padding:13px 26px;text-decoration:none;white-space:nowrap; box-shadow:0 8px 22px rgba(254,44,85,.35);transition:transform .2s ease} .wcta:hover{transform:translateY(-2px)} } /* ===== 理由03/04：常時モーション強化 ===== */ @media(prefers-reduced-motion:no-preference){ /* 03 名簿が生きて呼吸し、増え続ける */ .r3b{transform-box:fill-box;transform-origin:center} .rv.in .r3-1 .r3b{animation:r3bob 3.6s 0s ease-in-out infinite} .rv.in .r3-2 .r3b{animation:r3bob 3.6s .3s ease-in-out infinite} .rv.in .r3-3 .r3b{animation:r3bob 3.6s .6s ease-in-out infinite} .rv.in .r3-4 .r3b{animation:r3bob 3.6s .9s ease-in-out infinite} .rv.in .r3-5 .r3b{animation:r3bob 3.6s 1.2s ease-in-out infinite} .rv.in .r3-6 .r3b{animation:r3bob 3.6s 1.5s ease-in-out infinite} .rv.in .r3-7 .r3b{animation:r3bob 3.6s 1.8s ease-in-out infinite} @keyframes r3bob{0%,100%{transform:translateY(0)}50%{transform:translateY(-3.5px)}} .r3-ring{animation:r3dash 7s linear infinite} @keyframes r3dash{to{stroke-dashoffset:-64}} .r3-join{opacity:0;transform-box:fill-box;transform-origin:center} .rv.in .r3-join{animation:r3join 5.2s cubic-bezier(.34,1.56,.64,1) infinite} @keyframes r3join{0%,52%{opacity:0;transform:scale(.3)}60%,80%{opacity:1;transform:scale(1)}90%,100%{opacity:0;transform:scale(.85)}} .rv.in .r3-pl{animation:r3plfade 5.2s ease-in-out infinite} @keyframes r3plfade{0%,50%{opacity:1}58%,82%{opacity:0}92%,100%{opacity:1}} /* 04 スキャン→選抜確定→購入までの5秒サイクル */ .r4-scan{transform-box:view-box;filter:drop-shadow(0 0 6px rgba(254,44,85,.4))} .rv.in .r4-scan{animation:r4scan 5s cubic-bezier(.34,1.56,.64,1) infinite} @keyframes r4scan{ 0%,9%{transform:translateX(0);stroke-width:2.2;opacity:1} 15%,24%{transform:translateX(45px);stroke-width:2.2} 30%,36%{transform:translateX(90px);stroke-width:2.4} 41%{transform:translateX(90px);stroke-width:3.8} 46%,96%{transform:translateX(90px);stroke-width:2.6;opacity:1} 100%{transform:translateX(90px);opacity:1}} .rv.in .g-run{animation:r4run 5s cubic-bezier(.45,.05,.55,.95) infinite} @keyframes r4run{0%,46%{offset-distance:0%;opacity:0} 52%{opacity:1}70%{opacity:1} 74%{offset-distance:100%;opacity:0}100%{offset-distance:100%;opacity:0}} .rv.in .g-box{animation:r4boxpop 5s cubic-bezier(.34,1.56,.64,1) infinite} @keyframes r4boxpop{0%,70%{transform:scale(1)}76%{transform:scale(1.09)}84%,100%{transform:scale(1)}} .r4-yen{animation:none} .rv.in .r4-yen{animation:r4yen2 5s ease-in-out infinite} @keyframes r4yen2{0%,34%{transform:scale(1)}41%{transform:scale(1.3)}48%,100%{transform:scale(1)}} } /* ===== 理由カード：番号強調＋01/02常時モーション ===== */ .cards--2 .card::after{content:"0" counter(rsn);position:absolute;top:4px;right:14px;font-family:var(--f-num); font-size:58px;font-weight:800;color:#FDEBEF;-webkit-text-stroke:1.5px #FB7A96;letter-spacing:-.02em;pointer-events:none} @media(prefers-reduced-motion:no-preference){ .rv .card::after{opacity:0} .rv.in .card::after{animation:rnumin .7s cubic-bezier(.34,1.56,.64,1) .25s forwards,rnumfloat 5s 1.2s ease-in-out infinite} @keyframes rnumin{from{opacity:0;transform:scale(.4) rotate(-6deg)}to{opacity:1;transform:scale(1) rotate(0)}} @keyframes rnumfloat{0%,100%{transform:translateY(0)}50%{transform:translateY(-4px)}} /* 01 知見が乗り移るループ：CNカーブ→矢印→JPカーブ */ .r1-c1{offset-path:path("M14 78 C 44 74, 56 30, 86 18");opacity:0} @keyframes r1c1{0%{offset-distance:0%;opacity:0}5%{opacity:1} 36%{offset-distance:100%;opacity:1}42%,100%{offset-distance:100%;opacity:0}} @keyframes r1c2{0%,46%{offset-distance:0%;opacity:0}52%{opacity:1} 88%{offset-distance:100%;opacity:1}94%,100%{offset-distance:100%;opacity:0}} /* 02 DBが受信のたびに脈動 */ .r2-db{transform-box:fill-box;transform-origin:center} .rv.in .r2-db{animation:r2dbpulse 1.2s ease-in-out infinite} @keyframes r2dbpulse{0%,72%,100%{transform:scale(1);filter:none} 82%{transform:scale(1.035);filter:drop-shadow(0 0 8px rgba(37,244,238,.5))}} } /* ===== FVバッジ形式BB（アイコンタイル・江崎さん選択 2026-09-02） ===== */ /* ================================================== */ /* BB-facts — 実績バッジ帯（アイコンタイル型・3カード） */ /* ================================================== */ .BB-facts{ --BB-cyan:#25F4EE; --BB-label:#c9ccd1; --BB-ink:#ffffff; container-type:inline-size; display:grid; grid-template-columns:repeat(3,1fr); gap:8px; max-width:860px; font-family:-apple-system,BlinkMacSystemFont,"Helvetica Neue","Hiragino Sans","Noto Sans JP",Meiryo,sans-serif; line-height:1.35; } .BB-card{ display:flex; flex-direction:column; align-items:center; gap:8px; padding:12px 6px 11px; background:linear-gradient(180deg,rgba(255,255,255,.055),rgba(255,255,255,.02)); border:1px solid rgba(255,255,255,.10); border-top-color:rgba(255,255,255,.16); border-radius:14px; text-align:center; } /* アイコンタイル：シアンの光弧がフチを周回する */ .BB-icon{ position:relative; width:36px;height:36px; border-radius:11px; overflow:hidden; flex:none; display:flex;align-items:center;justify-content:center; transform:translateZ(0); box-shadow:0 0 16px rgba(37,244,238,.16); } .BB-icon::before{ content:""; position:absolute;inset:-45%; background: conic-gradient(from var(--BB-a,0deg), rgba(37,244,238,.14) 0deg, rgba(37,244,238,.14) 230deg, rgba(37,244,238,.95) 305deg, rgba(37,244,238,.14) 360deg); animation:BB-spin 3.8s linear infinite; } .BB-icon::after{ content:""; position:absolute;inset:1px; border-radius:10px; background:linear-gradient(180deg,#0d1417,#080d10); } .BB-icon svg{ position:relative;z-index:1; width:19px;height:19px; color:var(--BB-cyan); } /* 光弧の初期位相をずらす（reduced-motion時も別位置で静止） */ .BB-card:nth-child(2) .BB-icon::before{--BB-a:120deg;animation-delay:-1.27s;} .BB-card:nth-child(3) .BB-icon::before{--BB-a:240deg;animation-delay:-2.53s;} @keyframes BB-spin{to{transform:rotate(360deg);}} .BB-txt{display:flex;flex-direction:column;gap:2px;min-width:0;} .BB-label{ color:var(--BB-label); font-size:10.5px; letter-spacing:0; white-space:nowrap; } .BB-value{ color:var(--BB-ink); font-size:15px; font-weight:700; letter-spacing:.01em; white-space:nowrap; font-feature-settings:"palt"; } /* ワイド時：カードを横組み（アイコン左・テキスト右）に */ @container (min-width:560px){ .BB-facts{gap:10px;} .BB-card{ flex-direction:row; justify-content:flex-start; text-align:left; gap:12px; padding:13px 18px; } .BB-icon{width:40px;height:40px;border-radius:12px;} .BB-icon svg{width:21px;height:21px;} .BB-label{font-size:11.5px;letter-spacing:.02em;} .BB-value{font-size:17px;} } @media (prefers-reduced-motion:reduce){ .BB-facts *, .BB-facts *::before, .BB-facts *::after{animation:none!important;transition:none!important;} } .BB-facts{margin:0 0 22px} /* ===== 通知カード形式NF（江崎さん選択 2026-09-02） ===== */ .NF-set{ display:flex;align-items:flex-start;gap:34px; font-family:-apple-system,BlinkMacSystemFont,"Helvetica Neue","Hiragino Kaku Gothic ProN","Hiragino Sans","Noto Sans JP",Meiryo,sans-serif; -webkit-font-smoothing:antialiased; position:relative;z-index:1; } .NF-card{ box-sizing:border-box;border-radius:22px;position:relative; --NF-rot:0deg;transform:rotate(var(--NF-rot)); } /* ---- SOLD notification : red solid x white ---- */ .NF-sold{ --NF-rot:-1.7deg; width:212px; padding:12px 14px 11px; background:linear-gradient(150deg,#e8134a 0%,#c40b3c 100%); border:1px solid rgba(255,255,255,.34); box-shadow: 0 0 0 1px rgba(255,64,118,.38), 0 0 30px rgba(240,35,95,.5), 0 16px 34px rgba(0,0,0,.55), inset 0 1px 0 rgba(255,255,255,.30); animation:NF-float 5.4s ease-in-out infinite; } .NF-sold-row{display:flex;align-items:center;gap:10px} .NF-sold-icon{ flex:none;width:34px;height:34px;border-radius:12px; display:flex;align-items:center;justify-content:center; background:rgba(255,255,255,.18); box-shadow:inset 0 1px 0 rgba(255,255,255,.25); } .NF-sold-icon svg{display:block;width:19px;height:19px} .NF-sold-main{display:flex;flex-direction:column;gap:3px;min-width:0} .NF-sold-top{display:flex;align-items:center;gap:6px} .NF-sold-badge{ display:inline-block; font-size:9.5px;font-weight:800;letter-spacing:.14em;line-height:1; color:#cf0d3f;background:#ffffff; padding:3px 8px 2.5px;border-radius:999px; } .NF-sold-dot{ width:6px;height:6px;border-radius:50%;background:#ffffff; box-shadow:0 0 0 2.5px rgba(255,255,255,.28),0 0 8px rgba(255,255,255,.95); animation:NF-blink 1.6s ease-in-out infinite; } .NF-sold-title{ margin:0;font-size:14.5px;font-weight:700;line-height:1.2; color:#ffffff;letter-spacing:.02em;white-space:nowrap; } .NF-sold-note{ margin:8px 0 0;font-size:10px;font-weight:500;line-height:1; color:#ffffff;opacity:1;letter-spacing:.02em;white-space:nowrap; } /* ---- weekly report : white x black, small, extra-round ---- */ .NF-report{ --NF-rot:1.8deg; width:188px; padding:12px 13px 11px; background:linear-gradient(180deg,#ffffff 0%,#f3f6fa 100%); border:1px solid rgba(255,255,255,.95); box-shadow: 0 0 0 1px rgba(96,224,255,.30), 0 0 26px rgba(60,205,250,.34), 0 16px 34px rgba(0,0,0,.55); animation:NF-float 6.4s ease-in-out .9s infinite; } /* ---- motion ---- */ @keyframes NF-float{ 0%,100%{transform:translateY(0) rotate(var(--NF-rot))} 50%{transform:translateY(-6px) rotate(var(--NF-rot))} } @keyframes NF-blink{ 0%,100%{opacity:1} 50%{opacity:.25} } @keyframes NF-pulse{ 0%,100%{opacity:.55} 50%{opacity:.1} } @media (prefers-reduced-motion: reduce){ .NF-card,.NF-sold-dot,.NF-chart-pulse{animation:none !important} } /* 位置ラッパー側の旧スタイルを無効化（配置と浮遊だけ残す） */ .xsold--nf,.xrepo--nf{background:transparent;box-shadow:none;border:0;padding:0;width:auto} .xsold--nf .bag,.xsold--nf p{display:revert} /* cy1 SP：6ノード化に伴う重なり解消（カードをコンパクトに） */ /* UIUX監査バグ修正：アンカー着地時のヘッダー隠れ・FAQタップ領域 */ section[id]{scroll-margin-top:72px} .qa summary,.proc summary,.chq summary{min-height:44px} .qa summary{padding:14px 30px 14px 0} .qa{padding:0} /* ===== 導入の流れ F1（江崎さん選択 2026-09-02） ===== */ /* ============ fl1 : 導入の流れ（イラストステッパー） ============ */ .fl1-wrap{position:relative;background:#fff;max-width:1120px;margin-inline:auto;padding:30px 12px 12px;font-family:"Hiragino Sans","Hiragino Kaku Gothic ProN","Noto Sans JP","Yu Gothic",-apple-system,BlinkMacSystemFont,sans-serif;color:#111215} .fl1-wrap,.fl1-wrap *,.fl1-wrap *::before,.fl1-wrap *::after{box-sizing:border-box} .fl1-steps{list-style:none;margin:0;padding:0;position:relative;display:grid;grid-template-columns:repeat(5,1fr)} .fl1-step{position:relative;display:flex;flex-direction:column;align-items:center;text-align:center;padding:24px 10px 20px;opacity:0;transform:translateY(16px)} .fl1-art{width:96px;height:76px;margin:0 0 10px;filter:grayscale(1) opacity(.45)} .fl1-svg{width:100%;height:100%;display:block;overflow:visible} .fl1-num{position:relative;z-index:2;width:34px;height:34px;border-radius:50%;background-color:#fff;border:2px solid #F5C6D1;box-shadow:0 0 0 3px #fff;color:#B01D36;font-weight:800;font-size:15px;line-height:1;display:grid;place-items:center;margin:0 0 12px} /* 進行ライン（各ステップから次の番号までのセグメント） */ .fl1-step:not(:last-child)::before, .fl1-step:not(:last-child)::after{content:"";position:absolute;z-index:1;left:calc(50% + 22px);right:calc(-50% + 22px);top:125px;height:4px;border-radius:2px} .fl1-step:not(:last-child)::before{background:#F5C6D1;opacity:.6} .fl1-step:not(:last-child)::after{background:linear-gradient(90deg,#FE2C55,#E11D48);transform:scaleX(0);transform-origin:left center} .fl1-t{margin:0;font-size:15px;line-height:1.45;font-weight:700;color:#111215;letter-spacing:.01em} .fl1-tag{display:block;font-size:11.5px;font-weight:700;color:#65686d;margin-top:3px;letter-spacing:.02em} .fl1-d{margin:6px 0 0;font-size:12px;line-height:1.75;color:#65686d;max-width:19em} /* ---- リビール層（.fl1-wrap.in で発火） ---- */ .fl1-wrap.in .fl1-step{animation:fl1-up .55s cubic-bezier(.22,.9,.32,1) both} .fl1-wrap.in .fl1-step:nth-child(2){animation-delay:.08s} .fl1-wrap.in .fl1-step:nth-child(3){animation-delay:.16s} .fl1-wrap.in .fl1-step:nth-child(4){animation-delay:.24s} .fl1-wrap.in .fl1-step:nth-child(5){animation-delay:.32s} .fl1-wrap.in .fl1-step:not(:last-child)::after{animation:fl1-fill .38s linear both} .fl1-wrap.in .fl1-step:nth-child(1)::after{animation-delay:.55s} .fl1-wrap.in .fl1-step:nth-child(2)::after{animation-delay:.93s} .fl1-wrap.in .fl1-step:nth-child(3)::after{animation-delay:1.31s} .fl1-wrap.in .fl1-step:nth-child(4)::after{animation-delay:1.69s} .fl1-wrap.in .fl1-num{animation:fl1-num-on .5s cubic-bezier(.34,1.56,.64,1) both} .fl1-wrap.in .fl1-step:nth-child(1) .fl1-num{animation-delay:.4s} .fl1-wrap.in .fl1-step:nth-child(2) .fl1-num{animation-delay:.93s} .fl1-wrap.in .fl1-step:nth-child(3) .fl1-num{animation-delay:1.31s} .fl1-wrap.in .fl1-step:nth-child(4) .fl1-num{animation-delay:1.69s} .fl1-wrap.in .fl1-step:nth-child(5) .fl1-num{animation-delay:2.07s} .fl1-wrap.in .fl1-art{animation:fl1-art-on .6s ease both} .fl1-wrap.in .fl1-step:nth-child(1) .fl1-art{animation-delay:.4s} .fl1-wrap.in .fl1-step:nth-child(2) .fl1-art{animation-delay:.93s} .fl1-wrap.in .fl1-step:nth-child(3) .fl1-art{animation-delay:1.31s} .fl1-wrap.in .fl1-step:nth-child(4) .fl1-art{animation-delay:1.69s} .fl1-wrap.in .fl1-step:nth-child(5) .fl1-art{animation-delay:2.07s} @keyframes fl1-up{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:none}} @keyframes fl1-fill{to{transform:scaleX(1)}} @keyframes fl1-fillY{to{transform:scaleY(1)}} @keyframes fl1-num-on{0%{background-color:#fff;border-color:#F5C6D1;color:#B01D36;transform:scale(1)}45%{transform:scale(1.22)}100%{background-color:#FE2C55;border-color:#E11D48;color:#fff;transform:scale(1)}} @keyframes fl1-art-on{0%{filter:grayscale(1) opacity(.45);transform:scale(1)}55%{filter:grayscale(0) opacity(1);transform:scale(1.07)}100%{filter:grayscale(0) opacity(1);transform:scale(1)}} @keyframes fl1-label{0%{opacity:0;transform:translateX(-50%) translateY(8px) scale(.92)}100%{opacity:1;transform:translateX(-50%)}} /* ---- 常時ループ層（イラスト内マイクロアニメ） ---- */ .fl1-m-hand{transform-box:fill-box;transform-origin:50% 100%;animation:fl1-spin 3.5s linear infinite} .fl1-m-pen{transform-box:fill-box;transform-origin:20% 92%;animation:fl1-wiggle 1.4s ease-in-out infinite} .fl1-m-bub{transform-box:fill-box;transform-origin:15% 100%;animation:fl1-pop 2.4s ease-in-out infinite} .fl1-m-dot{animation:fl1-blink 1.2s ease-in-out infinite} .fl1-m-dot2{animation-delay:.2s} .fl1-m-dot3{animation-delay:.4s} .fl1-m-p1{transform-box:fill-box;animation:fl1-bob 3s ease-in-out infinite} .fl1-m-p2{transform-box:fill-box;animation:fl1-bob 3s ease-in-out 1.5s infinite} .fl1-m-bar{transform-box:fill-box;transform-origin:50% 100%;animation:fl1-grow 2.6s ease-in-out infinite} .fl1-m-bar2{animation-delay:.3s} .fl1-m-bar3{animation-delay:.6s} .fl1-m-bar4{animation-delay:.9s} .fl1-m-mag{transform-box:fill-box;animation:fl1-orbit 5s ease-in-out infinite} .fl1-m-badge{transform-box:fill-box;transform-origin:50% 50%;animation:fl1-pop 2s ease-in-out infinite} .fl1-m-pen2{transform-box:fill-box;transform-origin:30% 95%;animation:fl1-wiggle 1.6s ease-in-out infinite} .fl1-m-rk{transform-box:fill-box;animation:fl1-bob 2.4s ease-in-out infinite} .fl1-m-fl{transform-box:fill-box;transform-origin:50% 0%;animation:fl1-flame .6s ease-in-out infinite} .fl1-m-flag{transform-box:fill-box;transform-origin:0% 50%;animation:fl1-wave 1.6s ease-in-out infinite} .fl1-m-sp{transform-box:fill-box;transform-origin:50% 50%;animation:fl1-twinkle 1.8s ease-in-out infinite} .fl1-m-sp2{animation-delay:.9s} .fl1-m-ln{animation:fl1-fall 1.1s linear infinite} .fl1-m-ln2{animation-delay:.55s} @keyframes fl1-spin{to{transform:rotate(360deg)}} @keyframes fl1-wiggle{0%,100%{transform:rotate(0deg)}50%{transform:rotate(-8deg)}} @keyframes fl1-pop{0%,100%{transform:scale(1)}50%{transform:scale(1.08)}} @keyframes fl1-blink{0%,100%{opacity:.25}40%{opacity:1}} @keyframes fl1-bob{0%,100%{transform:translateY(0)}50%{transform:translateY(-2.5px)}} @keyframes fl1-grow{0%,100%{transform:scaleY(1)}50%{transform:scaleY(.72)}} @keyframes fl1-orbit{0%,100%{transform:translate(0,0)}25%{transform:translate(2.5px,-2px)}50%{transform:translate(0,-3.5px)}75%{transform:translate(-2.5px,-1px)}} @keyframes fl1-flame{0%,100%{transform:scaleY(1)}50%{transform:scaleY(.62)}} @keyframes fl1-wave{0%,100%{transform:scaleX(1)}50%{transform:scaleX(.85)}} @keyframes fl1-twinkle{0%,100%{opacity:1;transform:scale(1)}50%{opacity:.12;transform:scale(.7)}} @keyframes fl1-fall{0%{transform:translateY(-3px);opacity:0}30%{opacity:1}100%{transform:translateY(8px);opacity:0}} /* ---- SP（縦積み・上→下） ---- */ @media (max-width:719px){ .fl1-wrap{padding:26px 12px 10px} .fl1-steps{display:block} .fl1-step{display:grid;grid-template-columns:40px 1fr 78px;column-gap:10px;text-align:left;padding:16px 14px} .fl1-step:first-child{padding-top:24px} .fl1-num{grid-column:1;grid-row:1/span 2;align-self:start;justify-self:start;margin:2px 0 0} .fl1-t{grid-column:2;grid-row:1;align-self:center} .fl1-tag{display:inline-block;margin:0 0 0 2px;white-space:nowrap} .fl1-d{grid-column:2;grid-row:2;margin:5px 0 0;max-width:none} .fl1-art{grid-column:3;grid-row:1/span 2;align-self:center;justify-self:end;width:78px;height:62px;margin:0} .fl1-step:not(:last-child)::before, .fl1-step:not(:last-child)::after{left:29px;right:auto;width:4px;height:auto;top:37px;bottom:-37px} .fl1-step:first-child::before, .fl1-step:first-child::after{top:61px} .fl1-step:not(:last-child)::after{background:linear-gradient(180deg,#FE2C55,#E11D48);transform:scaleY(0);transform-origin:center top} .fl1-wrap.in .fl1-step:not(:last-child)::after{animation-name:fl1-fillY} } /* ---- reduced-motion：完成形で静止 ---- */ @media (prefers-reduced-motion:reduce){ .fl1-wrap *,.fl1-wrap *::before,.fl1-wrap *::after{animation:none!important;transition:none!important} .fl1-step{opacity:1;transform:none} .fl1-step:not(:last-child)::after{transform:none} .fl1-num{background-color:#FE2C55;border-color:#E11D48;color:#fff} .fl1-art{filter:none} } /* ===== 判断ボード対応 2026-09-02 ===== */ html{scroll-behavior:auto} /* A3: お悩みwideカードのCTAをモバイルでも表示（全幅ボタン） */ @media(max-width:767px){ .wcta{display:flex;justify-content:center;width:100%;margin:12px 0 0;background:#E11D48;color:#fff; font-size:14px;font-weight:800;border-radius:999px;padding:13px 0;text-decoration:none} .worry.wide{flex-wrap:wrap} } /* C4: ヘッダーCTAを赤ピル化 */ .hd nav{align-items:center} .hd nav .navcta{display:inline-flex;align-items:center;line-height:1;background:#E11D48;color:#fff; border-radius:999px;padding:11px 20px;font-weight:800;min-height:38px;box-sizing:border-box} .hd nav .navcta:hover{background:#B01D36} /* LIVEバー：ショップ名とフォローの間隔を確保（重なって見える対策） */ .lv-host{gap:7px;padding-right:7px} .lv-name{max-width:none;font-size:8.5px;line-height:1.1} .lv-follow{flex:0 0 auto;margin-left:2px} .lv-top{gap:7px} /* D13: フォーム送信ボタンの様式統一（黒縁オフセット影を廃し標準赤ボタンに） */ .cform .btn{border:0;box-shadow:none;background:var(--c-cta,#E11D48)} .cform .btn:hover{background:#B01D36} /* D15: リビールのイージング署名を統一（quintic-out） */ @media(prefers-reduced-motion:no-preference){ .rv.in{transition-timing-function:cubic-bezier(.22,1,.36,1)} } /* レコードが貯まる：540,000件の隣に積層（DS-Aと同じ表現をLP本体にも） */ .ds-count{position:relative} @media(prefers-reduced-motion:no-preference){ @keyframes ds-pile{0%{opacity:0;transform:translateY(4px)}4%{opacity:.85;transform:translateY(0)} 9%,74%{opacity:.4}84%,100%{opacity:0}} } /* お悩みカード：意味の切れ目でだけ折り返す */ .worry p span{display:inline-block} .worry p{text-wrap:pretty} /* A4統合：更新ループを1行注記として吸収 */ .loopnote{max-width:760px;margin:14px auto 0;text-align:center;font-size:13px;line-height:1.9; color:var(--c-text-mute);padding-top:6px} .loopnote strong{color:#B01D36;font-weight:800} /* ===== DATA セクション本体：ds_a を採用（0902_162930） ===== */ /* ===== ds_a: データ基盤セクション（黒地・タブ切替） ===== */ .ds_a-wrap,.ds_a-wrap *{box-sizing:border-box;margin:0;padding:0} .ds_a-wrap{ --ds_a-red:#FE2C55; --ds_a-cyan:#25F4EE; --ds_a-line:rgba(255,255,255,.85); --ds_a-sub:#c9ccd1; --ds_a-ink:rgba(255,255,255,.94); --ds_a-under:rgba(255,255,255,.06); max-width:880px;margin:0 auto;padding:8px 24px 16px; font-family:"Hiragino Kaku Gothic ProN","Hiragino Sans","Noto Sans JP",Meiryo,system-ui,-apple-system,sans-serif; color:var(--ds_a-ink);text-align:center; } .ds_a-r{position:absolute;opacity:0;pointer-events:none} /* --- 見出し --- */ .ds_a-eyebrow{font-size:11px;letter-spacing:.26em;color:var(--ds_a-sub);font-weight:600} .ds_a-h{margin-top:14px;font-size:30px;line-height:1.45;font-weight:700;color:#fff} .ds_a-lead{margin-top:10px;font-size:14px;line-height:1.9;color:var(--ds_a-sub)} /* --- ピル型スイッチ --- */ .ds_a-pill{position:relative;display:flex;width:min(400px,100%);margin:30px auto 0;padding:4px;background:var(--ds_a-under);border-radius:999px} .ds_a-thumb{position:absolute;top:4px;bottom:4px;left:4px;width:calc((100% - 8px)/3);background:#fff;border-radius:999px;transition:transform .3s ease} #ds_a-t2:checked~.ds_a-pill .ds_a-thumb{transform:translateX(100%)} #ds_a-t3:checked~.ds_a-pill .ds_a-thumb{transform:translateX(200%)} .ds_a-tab{position:relative;z-index:1;flex:1;padding:10px 4px;font-size:14px;font-weight:700;color:var(--ds_a-sub);border-radius:999px;cursor:pointer;transition:color .25s ease;-webkit-user-select:none;user-select:none;line-height:1.4} .ds_a-tab:hover{color:#fff} #ds_a-t1:checked~.ds_a-pill .ds_a-tabl1, #ds_a-t2:checked~.ds_a-pill .ds_a-tabl2, #ds_a-t3:checked~.ds_a-pill .ds_a-tabl3{color:#111215} .ds_a-r:focus-visible~.ds_a-pill{outline:2px solid rgba(255,255,255,.6);outline-offset:3px} /* --- パネル共通 --- */ .ds_a-panels{display:grid;margin-top:36px} .ds_a-p{grid-area:1/1;opacity:0;visibility:hidden;transform:translateY(8px);transition:opacity .3s ease,transform .3s ease,visibility 0s .3s;padding-top:4px} #ds_a-t1:checked~.ds_a-panels .ds_a-p1, #ds_a-t2:checked~.ds_a-panels .ds_a-p2, #ds_a-t3:checked~.ds_a-panels .ds_a-p3{opacity:1;visibility:visible;transform:none;transition:opacity .35s ease .1s,transform .35s ease .1s,visibility 0s} .ds_a-cap{font-size:13px;color:var(--ds_a-sub);font-weight:600;letter-spacing:.06em} .ds_a-capnote{font-size:11px;font-weight:400;margin-left:8px} /* --- タブ1：蓄積量 --- */ .ds_a-num{margin-top:10px;font-size:78px;font-weight:800;letter-spacing:-.02em;line-height:1.15;color:var(--ds_a-red);font-family:"Helvetica Neue",Arial,"Hiragino Kaku Gothic ProN",sans-serif} .ds_a-unit{font-size:.3em;font-weight:700;color:var(--ds_a-sub);margin-left:8px;letter-spacing:.02em} .ds_a-wrap.in .ds_a-num{animation:ds_a-numswap 9s ease-in-out infinite} @keyframes ds_a-numswap{ 0%,44%{color:var(--ds_a-red)} 50%,94%{color:var(--ds_a-cyan)} 100%{color:var(--ds_a-red)} } .ds_a-cap2{margin-top:30px;font-size:12px;color:var(--ds_a-sub);letter-spacing:.08em} .ds_a-chips{margin-top:14px;display:flex;flex-wrap:wrap;justify-content:center;gap:10px} .ds_a-chip{display:inline-flex;align-items:center;gap:8px;padding:9px 16px;border:1.8px solid var(--ds_a-line);border-radius:4px;font-size:13px;font-weight:600;color:var(--ds_a-ink);line-height:1.4} .ds_a-chipdot{width:8px;height:8px;border-radius:2px;background:var(--ds_a-cyan);flex-shrink:0} /* --- タブ2：更新体制 --- */ .ds_a-flow{display:flex;justify-content:center;align-items:flex-start;max-width:640px;margin:26px auto 0} .ds_a-step{width:160px;flex-shrink:0;display:flex;flex-direction:column;align-items:center} .ds_a-node{position:relative;width:76px;height:76px;border:1.8px solid var(--ds_a-line);border-radius:50%;display:flex;align-items:center;justify-content:center;flex-shrink:0} .ds_a-nodeRed{background:var(--ds_a-red);border-color:var(--ds_a-red)} .ds_a-g{width:30px;height:30px;display:block} .ds_a-stxt{display:flex;flex-direction:column;align-items:center} .ds_a-sl{margin-top:12px;font-size:14px;font-weight:700;color:#fff;line-height:1.5} .ds_a-ss{margin-top:4px;font-size:11px;line-height:1.7;color:var(--ds_a-sub)} .ds_a-seg{position:relative;flex:1;max-width:132px;height:12px;margin:32px -30px 0} .ds_a-dashH{position:absolute;left:0;top:0;width:calc(100% - 11px);height:12px;display:block} .ds_a-dashV{display:none} .ds_a-chev{position:absolute;right:0;top:0;width:10px;height:12px} .ds_a-dot{position:absolute;left:0;top:2px;width:8px;height:8px;border-radius:50%;background:var(--ds_a-cyan);opacity:0} .ds_a-wrap.in .ds_a-dot1{animation:ds_a-flow1 7s linear infinite} .ds_a-wrap.in .ds_a-dot2{animation:ds_a-flow2 7s linear infinite} @keyframes ds_a-flow1{ 0%{left:-2px;opacity:0} 6%{opacity:1} 40%{left:calc(100% - 16px);opacity:1} 46%,100%{left:calc(100% - 16px);opacity:0} } @keyframes ds_a-flow2{ 0%,46%{left:-2px;opacity:0} 52%{opacity:1} 84%{left:calc(100% - 16px);opacity:1} 90%,100%{left:calc(100% - 16px);opacity:0} } .ds_a-ring{position:absolute;inset:-8px;border:1.8px solid rgba(255,255,255,.85);border-radius:50%;opacity:0;transform:scale(.72)} .ds_a-wrap.in .ds_a-ring{animation:ds_a-pop 7s linear infinite} @keyframes ds_a-pop{ 0%,84%{opacity:0;transform:scale(.72)} 87%{opacity:.9;transform:scale(.8);animation-timing-function:cubic-bezier(.34,1.56,.64,1)} 98%,100%{opacity:0;transform:scale(1.18)} } .ds_a-src{margin-top:30px;font-size:11.5px;color:var(--ds_a-sub);letter-spacing:.04em} /* --- タブ3：できる分析 --- */ .ds_a-listhead{display:flex;align-items:center;justify-content:center;gap:10px;font-size:13px;color:var(--ds_a-sub);font-weight:600;letter-spacing:.06em} .ds_a-badge{display:inline-flex;align-items:center;justify-content:center;width:28px;height:28px;border-radius:50%;background:var(--ds_a-red);color:#fff;font-size:13px;font-weight:800;flex-shrink:0} .ds_a-list{list-style:none;margin:24px auto 0;max-width:600px;display:grid;grid-template-columns:1fr 1fr;gap:13px 28px;text-align:left} .ds_a-item{display:flex;align-items:center;gap:10px;font-size:14px;font-weight:600;color:var(--ds_a-ink);line-height:1.5} .ds_a-ck{width:19px;height:19px;flex-shrink:0} .ds_a-note{margin-top:26px;font-size:11.5px;color:var(--ds_a-sub)} /* --- リビール層 --- */ .ds_a-rev{transition:opacity .7s ease,transform .7s ease} .ds_a-rev2{transition-delay:.15s} .ds_a-rev3{transition-delay:.3s} .ds_a-wrap:not(.in) .ds_a-rev{opacity:0;transform:translateY(14px)} /* --- モバイル --- */ @media (max-width:560px){ .ds_a-wrap{padding:8px 16px 12px} .ds_a-h{font-size:20px} .ds_a-lead{font-size:12.5px} .ds_a-tab{font-size:12.5px;padding:9px 2px} .ds_a-num{font-size:47px} .ds_a-chip{padding:7px 12px;font-size:12px} .ds_a-flow{flex-direction:column;align-items:flex-start;width:238px;margin:18px auto 0} .ds_a-step{width:auto;flex-direction:row;gap:16px;align-items:center;text-align:left} .ds_a-stxt{align-items:flex-start} .ds_a-sl{margin-top:0;font-size:13px} .ds_a-ss{font-size:10.5px} .ds_a-node{width:58px;height:58px} .ds_a-g{width:24px;height:24px} .ds_a-ring{inset:-7px} .ds_a-seg{flex:none;width:12px;height:44px;margin:8px 0 8px 23px;max-width:none} .ds_a-dashH{display:none} .ds_a-dashV{display:block;position:absolute;left:0;top:0;width:12px;height:calc(100% - 11px)} .ds_a-chev{right:auto;left:1px;top:auto;bottom:0;transform:rotate(90deg)} .ds_a-dot{left:2px;top:-2px} .ds_a-wrap.in .ds_a-dot1{animation-name:ds_a-flow1v} .ds_a-wrap.in .ds_a-dot2{animation-name:ds_a-flow2v} .ds_a-src{font-size:10.5px} .ds_a-list{gap:11px 10px;margin-top:20px} .ds_a-item{font-size:11.5px;gap:8px;align-items:flex-start} .ds_a-ck{width:16px;height:16px;margin-top:1px} } @keyframes ds_a-flow1v{ 0%{top:-2px;opacity:0} 6%{opacity:1} 40%{top:calc(100% - 14px);opacity:1} 46%,100%{top:calc(100% - 14px);opacity:0} } @keyframes ds_a-flow2v{ 0%,46%{top:-2px;opacity:0} 52%{opacity:1} 84%{top:calc(100% - 14px);opacity:1} 90%,100%{top:calc(100% - 14px);opacity:0} } /* --- reduced-motion：完成形で静止 --- */ @media (prefers-reduced-motion:reduce){ .ds_a-rev,.ds_a-thumb,.ds_a-p,.ds_a-tab{transition:none} .ds_a-wrap:not(.in) .ds_a-rev{opacity:1;transform:none} .ds_a-wrap.in .ds_a-num,.ds_a-wrap.in .ds_a-dot1,.ds_a-wrap.in .ds_a-dot2,.ds_a-wrap.in .ds_a-ring{animation:none} .ds_a-dot{display:none} } @media(prefers-reduced-motion:no-preference){ @keyframes ds_a-pile{ 0%{opacity:0;transform:translateY(4px)} 4%{opacity:.85;transform:translateY(0)} 9%,74%{opacity:.4;transform:translateY(0)} 84%,100%{opacity:0} } } /* 週次レポート：図解1枚で簡潔に（スペース最小） */ .repcard{display:grid;grid-template-columns:1fr;gap:20px;align-items:center;margin:6px 0 0} @media(min-width:768px){.repcard{grid-template-columns:150px 1fr;gap:34px}} .rep-doc{display:flex;flex-direction:column;align-items:center;gap:10px} .rep-doc svg{width:112px;height:auto} .rep-tag{font-size:11px;font-weight:800;color:#B01D36;background:#FDEBEF;border-radius:999px;padding:5px 12px;white-space:nowrap} .rep-items{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:1fr;gap:8px} @media(min-width:640px){.rep-items{grid-template-columns:1fr 1fr;gap:10px 24px}} .rep-items li{display:flex;align-items:center;gap:11px;font-size:14px;font-weight:700;line-height:1.5} .rep-items i{flex:0 0 24px;height:24px;border-radius:50%;border:1.8px solid #111215;font-style:normal; font-family:var(--f-num);font-size:12px;font-weight:800;display:flex;align-items:center;justify-content:center} .rep-items .rep-hot i{background:#FE2C55;border-color:#FE2C55;color:#fff} .rep-items .rep-hot span{color:#B01D36} @media(prefers-reduced-motion:no-preference){ .rv .rep-items li{opacity:0;transform:translateY(6px)} .rv.in .rep-items li{animation:stagein .45s cubic-bezier(.22,1,.36,1) forwards} .rv.in .rep-items li:nth-child(2){animation-delay:.06s}.rv.in .rep-items li:nth-child(3){animation-delay:.12s} .rv.in .rep-items li:nth-child(4){animation-delay:.18s}.rv.in .rep-items li:nth-child(5){animation-delay:.24s} .rv.in .rep-items li:nth-child(6){animation-delay:.3s} } /* ===== DATAセクション：DS-A（タブ形式）を採用 ===== */ /* ===== ds_a: データ基盤セクション（黒地・タブ切替） ===== */ .ds_a-wrap,.ds_a-wrap *{box-sizing:border-box;margin:0;padding:0} .ds_a-wrap{ --ds_a-red:#FE2C55; --ds_a-cyan:#25F4EE; --ds_a-line:rgba(255,255,255,.85); --ds_a-sub:#c9ccd1; --ds_a-ink:rgba(255,255,255,.94); --ds_a-under:rgba(255,255,255,.06); max-width:880px;margin:0 auto;padding:8px 24px 16px; font-family:"Hiragino Kaku Gothic ProN","Hiragino Sans","Noto Sans JP",Meiryo,system-ui,-apple-system,sans-serif; color:var(--ds_a-ink);text-align:center; } .ds_a-r{position:absolute;opacity:0;pointer-events:none} /* --- 見出し --- */ .ds_a-eyebrow{font-size:11px;letter-spacing:.26em;color:var(--ds_a-sub);font-weight:600} .ds_a-h{margin-top:14px;font-size:30px;line-height:1.45;font-weight:700;color:#fff} .ds_a-lead{margin-top:10px;font-size:14px;line-height:1.9;color:var(--ds_a-sub)} /* --- ピル型スイッチ --- */ .ds_a-pill{position:relative;display:flex;width:min(400px,100%);margin:30px auto 0;padding:4px;background:var(--ds_a-under);border-radius:999px} .ds_a-thumb{position:absolute;top:4px;bottom:4px;left:4px;width:calc((100% - 8px)/3);background:#fff;border-radius:999px;transition:transform .3s ease} #ds_a-t2:checked~.ds_a-pill .ds_a-thumb{transform:translateX(100%)} #ds_a-t3:checked~.ds_a-pill .ds_a-thumb{transform:translateX(200%)} .ds_a-tab{position:relative;z-index:1;flex:1;padding:10px 4px;font-size:14px;font-weight:700;color:var(--ds_a-sub);border-radius:999px;cursor:pointer;transition:color .25s ease;-webkit-user-select:none;user-select:none;line-height:1.4} .ds_a-tab:hover{color:#fff} #ds_a-t1:checked~.ds_a-pill .ds_a-tabl1, #ds_a-t2:checked~.ds_a-pill .ds_a-tabl2, #ds_a-t3:checked~.ds_a-pill .ds_a-tabl3{color:#111215} .ds_a-r:focus-visible~.ds_a-pill{outline:2px solid rgba(255,255,255,.6);outline-offset:3px} /* --- パネル共通 --- */ .ds_a-panels{display:grid;margin-top:36px} .ds_a-p{grid-area:1/1;opacity:0;visibility:hidden;transform:translateY(8px);transition:opacity .3s ease,transform .3s ease,visibility 0s .3s;padding-top:4px} #ds_a-t1:checked~.ds_a-panels .ds_a-p1, #ds_a-t2:checked~.ds_a-panels .ds_a-p2, #ds_a-t3:checked~.ds_a-panels .ds_a-p3{opacity:1;visibility:visible;transform:none;transition:opacity .35s ease .1s,transform .35s ease .1s,visibility 0s} .ds_a-cap{font-size:13px;color:var(--ds_a-sub);font-weight:600;letter-spacing:.06em} .ds_a-capnote{font-size:11px;font-weight:400;margin-left:8px} /* --- タブ1：蓄積量 --- */ .ds_a-num{margin-top:10px;font-size:78px;font-weight:800;letter-spacing:-.02em;line-height:1.15;color:var(--ds_a-red);font-family:"Helvetica Neue",Arial,"Hiragino Kaku Gothic ProN",sans-serif} .ds_a-unit{font-size:.3em;font-weight:700;color:var(--ds_a-sub);margin-left:8px;letter-spacing:.02em} .ds_a-wrap.in .ds_a-num{animation:ds_a-numswap 9s ease-in-out infinite} @keyframes ds_a-numswap{ 0%,44%{color:var(--ds_a-red)} 50%,94%{color:var(--ds_a-cyan)} 100%{color:var(--ds_a-red)} } .ds_a-cap2{margin-top:30px;font-size:12px;color:var(--ds_a-sub);letter-spacing:.08em} .ds_a-chips{margin-top:14px;display:flex;flex-wrap:wrap;justify-content:center;gap:10px} .ds_a-chip{display:inline-flex;align-items:center;gap:8px;padding:9px 16px;border:1.8px solid var(--ds_a-line);border-radius:4px;font-size:13px;font-weight:600;color:var(--ds_a-ink);line-height:1.4} .ds_a-chipdot{width:8px;height:8px;border-radius:2px;background:var(--ds_a-cyan);flex-shrink:0} /* --- タブ2：更新体制 --- */ .ds_a-flow{display:flex;justify-content:center;align-items:flex-start;max-width:640px;margin:26px auto 0} .ds_a-step{width:160px;flex-shrink:0;display:flex;flex-direction:column;align-items:center} .ds_a-node{position:relative;width:76px;height:76px;border:1.8px solid var(--ds_a-line);border-radius:50%;display:flex;align-items:center;justify-content:center;flex-shrink:0} .ds_a-nodeRed{background:var(--ds_a-red);border-color:var(--ds_a-red)} .ds_a-g{width:30px;height:30px;display:block} .ds_a-stxt{display:flex;flex-direction:column;align-items:center} .ds_a-sl{margin-top:12px;font-size:14px;font-weight:700;color:#fff;line-height:1.5} .ds_a-ss{margin-top:4px;font-size:11px;line-height:1.7;color:var(--ds_a-sub)} .ds_a-seg{position:relative;flex:1;max-width:132px;height:12px;margin:32px -30px 0} .ds_a-dashH{position:absolute;left:0;top:0;width:calc(100% - 11px);height:12px;display:block} .ds_a-dashV{display:none} .ds_a-chev{position:absolute;right:0;top:0;width:10px;height:12px} .ds_a-dot{position:absolute;left:0;top:2px;width:8px;height:8px;border-radius:50%;background:var(--ds_a-cyan);opacity:0} .ds_a-wrap.in .ds_a-dot1{animation:ds_a-flow1 7s linear infinite} .ds_a-wrap.in .ds_a-dot2{animation:ds_a-flow2 7s linear infinite} @keyframes ds_a-flow1{ 0%{left:-2px;opacity:0} 6%{opacity:1} 40%{left:calc(100% - 16px);opacity:1} 46%,100%{left:calc(100% - 16px);opacity:0} } @keyframes ds_a-flow2{ 0%,46%{left:-2px;opacity:0} 52%{opacity:1} 84%{left:calc(100% - 16px);opacity:1} 90%,100%{left:calc(100% - 16px);opacity:0} } .ds_a-ring{position:absolute;inset:-8px;border:1.8px solid rgba(255,255,255,.85);border-radius:50%;opacity:0;transform:scale(.72)} .ds_a-wrap.in .ds_a-ring{animation:ds_a-pop 7s linear infinite} @keyframes ds_a-pop{ 0%,84%{opacity:0;transform:scale(.72)} 87%{opacity:.9;transform:scale(.8);animation-timing-function:cubic-bezier(.34,1.56,.64,1)} 98%,100%{opacity:0;transform:scale(1.18)} } .ds_a-src{margin-top:30px;font-size:11.5px;color:var(--ds_a-sub);letter-spacing:.04em} /* --- タブ3：できる分析 --- */ .ds_a-listhead{display:flex;align-items:center;justify-content:center;gap:10px;font-size:13px;color:var(--ds_a-sub);font-weight:600;letter-spacing:.06em} .ds_a-badge{display:inline-flex;align-items:center;justify-content:center;width:28px;height:28px;border-radius:50%;background:var(--ds_a-red);color:#fff;font-size:13px;font-weight:800;flex-shrink:0} .ds_a-list{list-style:none;margin:24px auto 0;max-width:600px;display:grid;grid-template-columns:1fr 1fr;gap:13px 28px;text-align:left} .ds_a-item{display:flex;align-items:center;gap:10px;font-size:14px;font-weight:600;color:var(--ds_a-ink);line-height:1.5} .ds_a-ck{width:19px;height:19px;flex-shrink:0} .ds_a-note{margin-top:26px;font-size:11.5px;color:var(--ds_a-sub)} /* --- リビール層 --- */ .ds_a-rev{transition:opacity .7s ease,transform .7s ease} .ds_a-rev2{transition-delay:.15s} .ds_a-rev3{transition-delay:.3s} .ds_a-wrap:not(.in) .ds_a-rev{opacity:0;transform:translateY(14px)} /* --- モバイル --- */ @media (max-width:560px){ .ds_a-wrap{padding:8px 16px 12px} .ds_a-h{font-size:20px} .ds_a-lead{font-size:12.5px} .ds_a-tab{font-size:12.5px;padding:9px 2px} .ds_a-num{font-size:47px} .ds_a-chip{padding:7px 12px;font-size:12px} .ds_a-flow{flex-direction:column;align-items:flex-start;width:238px;margin:18px auto 0} .ds_a-step{width:auto;flex-direction:row;gap:16px;align-items:center;text-align:left} .ds_a-stxt{align-items:flex-start} .ds_a-sl{margin-top:0;font-size:13px} .ds_a-ss{font-size:10.5px} .ds_a-node{width:58px;height:58px} .ds_a-g{width:24px;height:24px} .ds_a-ring{inset:-7px} .ds_a-seg{flex:none;width:12px;height:44px;margin:8px 0 8px 23px;max-width:none} .ds_a-dashH{display:none} .ds_a-dashV{display:block;position:absolute;left:0;top:0;width:12px;height:calc(100% - 11px)} .ds_a-chev{right:auto;left:1px;top:auto;bottom:0;transform:rotate(90deg)} .ds_a-dot{left:2px;top:-2px} .ds_a-wrap.in .ds_a-dot1{animation-name:ds_a-flow1v} .ds_a-wrap.in .ds_a-dot2{animation-name:ds_a-flow2v} .ds_a-src{font-size:10.5px} .ds_a-list{gap:11px 10px;margin-top:20px} .ds_a-item{font-size:11.5px;gap:8px;align-items:flex-start} .ds_a-ck{width:16px;height:16px;margin-top:1px} } @keyframes ds_a-flow1v{ 0%{top:-2px;opacity:0} 6%{opacity:1} 40%{top:calc(100% - 14px);opacity:1} 46%,100%{top:calc(100% - 14px);opacity:0} } @keyframes ds_a-flow2v{ 0%,46%{top:-2px;opacity:0} 52%{opacity:1} 84%{top:calc(100% - 14px);opacity:1} 90%,100%{top:calc(100% - 14px);opacity:0} } /* --- reduced-motion：完成形で静止 --- */ @media (prefers-reduced-motion:reduce){ .ds_a-rev,.ds_a-thumb,.ds_a-p,.ds_a-tab{transition:none} .ds_a-wrap:not(.in) .ds_a-rev{opacity:1;transform:none} .ds_a-wrap.in .ds_a-num,.ds_a-wrap.in .ds_a-dot1,.ds_a-wrap.in .ds_a-dot2,.ds_a-wrap.in .ds_a-ring{animation:none} .ds_a-dot{display:none} } @media(prefers-reduced-motion:no-preference){ @keyframes ds_a-pile{ 0%{opacity:0;transform:translateY(4px)} 4%{opacity:.85;transform:translateY(0)} 9%,74%{opacity:.4;transform:translateY(0)} 84%,100%{opacity:0} } } /* ===== 02/REASONS 01枚目の図解：rf_a を採用（0902_163413） ===== */ .rf_a-wrap{max-width:560px;margin:0 auto} .rf_a-wrap svg{display:block;width:100%;height:auto} .rf_a-wrap text{font-family:"Hiragino Kaku Gothic ProN","Hiragino Sans","Noto Sans JP",-apple-system,sans-serif} .rf_a-check{transform-box:fill-box;transform-origin:center;transform:scale(.5);opacity:0} .rf_a-dot{offset-path:path("M167 56 L169 56 L177 48 L179 48 L183 44");offset-distance:0%;offset-rotate:0deg} .rf_a-wrap.in .rf_a-check{animation:rf_a-pop .5s cubic-bezier(.34,1.56,.64,1) .2s forwards} .rf_a-wrap.in .rf_a-dot{animation:rf_a-flow 2.6s cubic-bezier(.45,.05,.35,1) .7s forwards} @keyframes rf_a-pop{to{transform:scale(1);opacity:1}} @keyframes rf_a-flow{to{offset-distance:100%}} @supports not (offset-path:path("M0 0")){.rf_a-dot{transform:translate(183px,44px)}} @media (prefers-reduced-motion:reduce){ .rf_a-check,.rf_a-wrap.in .rf_a-check{animation:none;transform:scale(1);opacity:1} .rf_a-dot,.rf_a-wrap.in .rf_a-dot{animation:none;offset-distance:100%} } /* ===== 07/CASTING の4カード：cs_a を採用（0902_163413） ===== */ /* ===== CS-A : assign process — single horizontal flow ===== */ .cs_a-wrap,.cs_a-wrap *{margin:0;padding:0;box-sizing:border-box} .cs_a-wrap{max-width:880px;margin:0 auto;color:#111215} .cs_a-flow{position:relative;display:flex;align-items:flex-start} .cs_a-step{ flex:1;display:flex;flex-direction:column;align-items:center;text-align:center; padding:0 10px; opacity:0;transform:translateY(12px); transition:opacity .55s ease,transform .55s cubic-bezier(.22,.61,.36,1); } .cs_a-wrap.in .cs_a-step{opacity:1;transform:none} .cs_a-wrap.in .cs_a-step:nth-child(1){transition-delay:.05s} .cs_a-wrap.in .cs_a-step:nth-child(2){transition-delay:.17s} .cs_a-wrap.in .cs_a-step:nth-child(3){transition-delay:.29s} .cs_a-wrap.in .cs_a-step:nth-child(4){transition-delay:.41s} .cs_a-icon{position:relative;z-index:1;width:88px;height:88px} .cs_a-svg{display:block;width:100%;height:100%} .cs_a-num{margin:16px 0 3px;font-size:10px;font-weight:700;letter-spacing:.22em;color:rgba(17,18,21,.42)} .cs_a-label{margin:0 0 7px;font-size:15px;font-weight:700;letter-spacing:.05em} .cs_a-desc{margin:0;font-size:12.5px;line-height:1.75;letter-spacing:.02em;color:rgba(17,18,21,.6)} /* --- connector track (behind icons) --- */ .cs_a-track{ position:absolute;left:12.5%;right:12.5%;top:43px;height:2px;z-index:0; opacity:0;transition:opacity .9s ease .5s; } .cs_a-wrap.in .cs_a-track{opacity:1} .cs_a-line{display:block} .cs_a-line--h{width:100%;height:2px} .cs_a-line--v{display:none;width:2px;height:100%} /* --- loop layer (1) : one dot flows along the dashed path --- */ .cs_a-dot{ position:absolute;left:0;top:1px;width:10px;height:10px;margin:-5px 0 0 -5px; border-radius:50%;background:#25F4EE;opacity:0; } .cs_a-wrap.in .cs_a-dot{opacity:1;animation:cs_a-dot-h 7.6s linear 1s infinite} @keyframes cs_a-dot-h{0%{left:0}82%{left:100%}100%{left:100%}} @keyframes cs_a-dot-v{0%{top:0}82%{top:100%}100%{top:100%}} /* --- loop layer (2) : small ring pop at arrival --- */ .cs_a-ring{ position:absolute;right:-51px;top:-49px;width:102px;height:102px; border:1.8px solid #25F4EE;border-radius:50%; opacity:0;transform:scale(.55); } .cs_a-wrap.in .cs_a-ring{animation:cs_a-pop 7.6s cubic-bezier(.34,1.56,.64,1) 1s infinite} @keyframes cs_a-pop{ 0%,80%{opacity:0;transform:scale(.55)} 86%{opacity:.85;transform:scale(.94)} 93%,100%{opacity:0;transform:scale(1.06)} } /* --- mobile : vertical flow --- */ @media (max-width:719px){ .cs_a-flow{display:block} .cs_a-step{flex-direction:row;align-items:flex-start;text-align:left;gap:18px;padding:0;min-height:104px} .cs_a-icon{width:64px;height:64px;flex:0 0 64px} .cs_a-body{padding-top:5px;min-width:0} .cs_a-num{margin:0 0 2px} .cs_a-label{margin:0 0 4px;font-size:15px} .cs_a-desc{font-size:12px;line-height:1.7} .cs_a-track{left:31px;right:auto;top:32px;width:2px;height:calc(100% - 104px)} .cs_a-line--h{display:none} .cs_a-line--v{display:block} .cs_a-dot{left:1px;top:0;margin:-5px 0 0 -5px} .cs_a-wrap.in .cs_a-dot{animation-name:cs_a-dot-v} .cs_a-ring{width:80px;height:80px;right:auto;left:-39px;top:calc(100% - 40px)} } /* --- reduced motion : settle on the finished state --- */ @media (prefers-reduced-motion:reduce){ .cs_a-wrap .cs_a-step,.cs_a-wrap .cs_a-track{opacity:1;transform:none;transition:none} .cs_a-wrap .cs_a-dot,.cs_a-wrap.in .cs_a-dot{animation:none;opacity:0} .cs_a-wrap .cs_a-ring,.cs_a-wrap.in .cs_a-ring{animation:none;opacity:0} } /* アサイン図と注記の間隔（図の説明文と重なっていた） */ #casting .cs_a-wrap{margin-bottom:26px} #casting > .wrap > .note{margin-top:6px} /* DS-Aタブ：選択中ラベルに実体の背景を与える（白い丸が別要素だとコントラスト監査が背景を拾えない） */ .ds_a-tab{position:relative;z-index:2;border-radius:999px;transition:background .28s ease,color .28s ease} #ds_a-t1:checked~.ds_a-pill .ds_a-tabl1, #ds_a-t2:checked~.ds_a-pill .ds_a-tabl2, #ds_a-t3:checked~.ds_a-pill .ds_a-tabl3{background:#ffffff;color:#111215} .ds_a-thumb{z-index:1} /* 理由カード：ゴースト数字と図解の重なりを解消（数字は図の外側の余白に置く） */ .cards--2 .card{padding-top:26px} .cards--2 .card::after{font-size:46px;top:10px;right:16px;line-height:1;z-index:0} .rdia{position:relative;z-index:1;height:104px;padding-right:56px;box-sizing:border-box} .rdia svg{height:100px;max-width:100%} @media(max-width:520px){ .cards--2 .card::after{font-size:38px;right:12px} .rdia{padding-right:44px} } /* ===== 色バランス調整：赤-B（番号・下線の赤を抜き、線画アイコンを黒基調に。赤は焦点だけ） ===== */ .eyebrow{color:#65686d} .sec-dark .eyebrow{color:#9a9ea6} .h2bar{background:#111215} .chno{color:#65686d;border-color:#d7dae0} .rep-tag{background:#EEF1F5;color:#65686d} .cards--2 .card::after{color:#F4F6F8;-webkit-text-stroke:1.2px #dfe3e9} .c4 svg,.cha svg{color:#111215;stroke:#111215} .rep-items i{border-color:#111215;color:#111215} .rep-items .rep-hot i{background:#111215;border-color:#111215} .rep-items .rep-hot span{color:#111215} /* ===== CTA-A：黒地セクションのCTAだけシアン（白地＝赤／黒地＝シアン） ===== */ .sec-dark .btn{background:#25F4EE;color:#111215} .sec-dark .btn:hover{background:#5DF7F2} .sec-dark .cta-inline::before{background:#25F4EE;color:#111215;border-color:#25F4EE} .fv .cta-row .btn{background:var(--c-cta,#E11D48);color:#fff} .fv .cta-row .btn:hover{background:#B01D36} @media(prefers-reduced-motion:no-preference){ @keyframes ds_a-pile{0%{opacity:0;transform:translateY(4px)}4%{opacity:.85;transform:translateY(0)} 9%,74%{opacity:.4}84%,100%{opacity:0}} } /* サイクル図：カードとコアを小さくして円周上でも余白が出るようにする */ /* data-pillが無いCTAでは、空のラベル枠を出さない（属性だけ消すと枠が残っていた） */ .cta-inline:not([data-pill])::before{content:none} .cta-inline:not([data-pill]){padding-top:0} /* ===== 03/CYCLE：横一列フロー（光-A リング発光）を採用 2026-09-02 ===== 円環をやめて左→右の1本フローに。ドットは01発、円の縁に当たった瞬間にそのノードが光る。 文字はHTML要素（SVG内テキストは幅に応じて縮み、901px付近で10px未満に潰れるため）。 */ .sec-alt .fl_a-wrap{--secbg:var(--c-bg-alt)} @property --lit{syntax:"";inherits:true;initial-value:0} .fl_a-wrap{--ink:#111215;--red:#FE2C55;--pink:#F5C6D1;--cyan:#25F4EE; max-width:1120px;margin-inline:auto;padding:8px 0 0; font-family:"Hiragino Sans","Hiragino Kaku Gothic ProN","Noto Sans JP","Yu Gothic",-apple-system,BlinkMacSystemFont,sans-serif;color:var(--ink)} .fl_a-wrap,.fl_a-wrap *{box-sizing:border-box} .fl_a-stage{position:relative;padding:0 0 58px} .fl_a-list{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(6,1fr);position:relative;z-index:2} .fl_a-node{display:flex;flex-direction:column;align-items:center;text-align:center;padding:0 7px} .fl_a-disc{width:72px;height:72px;border-radius:50%;background:#fff; border:1.8px solid var(--ink);display:grid;place-items:center;position:relative;z-index:2} .fl_a-ic{width:30px;height:30px;display:block;color:var(--ink)} .fl_a-ic svg{width:100%;height:100%;display:block} .fl_a-num{margin:11px 0 0;font-size:11px;font-weight:800;letter-spacing:.14em;color:#65686d;font-variant-numeric:tabular-nums} .fl_a-t{margin:3px 0 0;font-size:14px;font-weight:800;line-height:1.4} .fl_a-d{margin:5px 0 0;font-size:11.5px;line-height:1.65;color:#5f636a} .fl_a-d .d-sp{display:none} .fl_a-rail{position:absolute;left:calc(100%/6/2);right:calc(100%/6/2);top:36px;height:0; border-top:1.8px dashed #c9ced6;z-index:0} .fl_a-dot{position:absolute;top:36px;width:9px;height:9px;margin:-4.5px 0 0 -4.5px;border-radius:50%; background:var(--red);z-index:3;opacity:0;pointer-events:none} .fl_a-loop{position:absolute;left:0;right:0;bottom:0;height:40px} .fl_a-loopsvg,.fl_a-chevs{position:absolute;inset:0;width:100%;height:100%;overflow:visible} .fl_a-loopsvg path{fill:none;stroke:#c9ced6;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round; stroke-dasharray:5 7;vector-effect:non-scaling-stroke} .fl_a-cv{fill:none;stroke:#aeb4bd;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;vector-effect:non-scaling-stroke} .fl_a-cap{position:absolute;left:50%;top:14px;transform:translateX(-50%);margin:0;padding:0 12px;background:var(--secbg,#EEF1F5); font-size:11.5px;font-weight:700;color:#5f636a;white-space:nowrap} @keyframes fl_a-run{0%,2.6984%{left:calc(8.3333% + 37.8px);opacity:0}5.7302%{left:calc(8.3333% + 37.8px);opacity:0}8.4286%{opacity:1}14.881%{opacity:1}15.0794%{left:calc(25.0% - 37.8px);opacity:0}20.8095%{left:calc(25.0% + 37.8px);opacity:0}23.5079%{opacity:1}29.9603%{opacity:1}30.1587%{left:calc(41.6667% - 37.8px);opacity:0}35.8889%{left:calc(41.6667% + 37.8px);opacity:0}38.5873%{opacity:1}45.0397%{opacity:1}45.2381%{left:calc(58.3333% - 37.8px);opacity:0}50.9683%{left:calc(58.3333% + 37.8px);opacity:0}53.6667%{opacity:1}60.119%{opacity:1}60.3175%{left:calc(75.0% - 37.8px);opacity:0}66.0476%{left:calc(75.0% + 37.8px);opacity:0}68.746%{opacity:1}75.1984%{opacity:1}75.3968%{left:calc(91.6667% - 37.8px);opacity:0}100%{left:calc(91.6667% - 37.8px);opacity:0}} @keyframes fl_a-runSP{0%,2.6984%{top:79.8px;opacity:0}5.7302%{top:79.8px;opacity:0}8.4286%{opacity:1}14.881%{opacity:1}15.0794%{top:120.2px;opacity:0}20.8095%{top:179.8px;opacity:0}23.5079%{opacity:1}29.9603%{opacity:1}30.1587%{top:220.2px;opacity:0}35.8889%{top:279.8px;opacity:0}38.5873%{opacity:1}45.0397%{opacity:1}45.2381%{top:320.2px;opacity:0}50.9683%{top:379.8px;opacity:0}53.6667%{opacity:1}60.119%{opacity:1}60.3175%{top:420.2px;opacity:0}66.0476%{top:479.8px;opacity:0}68.746%{opacity:1}75.1984%{opacity:1}75.3968%{top:520.2px;opacity:0}100%{top:520.2px;opacity:0}} @keyframes fl_a-lit1{0%,0.0%{--lit:0}0.6746%{--lit:1}9.3492%{--lit:1}12.0635%,100%{--lit:0}}@keyframes fl_a-lit2{0%,15.0%{--lit:0}15.754%{--lit:1}24.4286%{--lit:1}27.1429%,100%{--lit:0}}@keyframes fl_a-lit3{0%,30.0794%{--lit:0}30.8333%{--lit:1}39.5079%{--lit:1}42.2222%,100%{--lit:0}}@keyframes fl_a-lit4{0%,45.1587%{--lit:0}45.9127%{--lit:1}54.5873%{--lit:1}57.3016%,100%{--lit:0}}@keyframes fl_a-lit5{0%,60.2381%{--lit:0}60.9921%{--lit:1}69.6667%{--lit:1}72.381%,100%{--lit:0}}@keyframes fl_a-lit6{0%,75.3175%{--lit:0}76.0714%{--lit:1}84.746%{--lit:1}87.4603%,100%{--lit:0}} .fl_a-wrap.in .fl_a-dot{animation:fl_a-run 12.599999999999998s linear infinite} .fl_a-wrap.in .fl_a-n1{animation:fl_a-lit1 12.599999999999998s linear infinite} .fl_a-wrap.in .fl_a-n2{animation:fl_a-lit2 12.599999999999998s linear infinite} .fl_a-wrap.in .fl_a-n3{animation:fl_a-lit3 12.599999999999998s linear infinite} .fl_a-wrap.in .fl_a-n4{animation:fl_a-lit4 12.599999999999998s linear infinite} .fl_a-wrap.in .fl_a-n5{animation:fl_a-lit5 12.599999999999998s linear infinite} .fl_a-wrap.in .fl_a-n6{animation:fl_a-lit6 12.599999999999998s linear infinite} .in .fl_a-wrap .fl_a-dot{animation:fl_a-run 12.599999999999998s linear infinite} .in .fl_a-wrap .fl_a-n1{animation:fl_a-lit1 12.599999999999998s linear infinite} .in .fl_a-wrap .fl_a-n2{animation:fl_a-lit2 12.599999999999998s linear infinite} .in .fl_a-wrap .fl_a-n3{animation:fl_a-lit3 12.599999999999998s linear infinite} .in .fl_a-wrap .fl_a-n4{animation:fl_a-lit4 12.599999999999998s linear infinite} .in .fl_a-wrap .fl_a-n5{animation:fl_a-lit5 12.599999999999998s linear infinite} .in .fl_a-wrap .fl_a-n6{animation:fl_a-lit6 12.599999999999998s linear infinite} .fl_a-disc{border-color:color-mix(in srgb,var(--red) calc(var(--lit)*100%),var(--ink));border-width:calc(1.8px + var(--lit)*0.7px)} @supports not (color:color-mix(in srgb,red,blue)){ .fl_a-disc{border-color:var(--ink);border-width:1.8px} } @media(max-width:820px){ .fl_a-list{grid-template-columns:1fr;gap:0} .fl_a-node{display:grid;grid-template-columns:56px 1fr;grid-template-areas:"ic num" "ic ttl" "ic dsc"; column-gap:14px;align-content:center;height:100px;padding:0;text-align:left} .fl_a-disc{grid-area:ic;width:56px;height:56px;align-self:center;justify-self:center} .fl_a-ic{width:24px;height:24px} .fl_a-num{grid-area:num;margin:0;font-size:10.5px} .fl_a-t{grid-area:ttl;margin:1px 0 0;font-size:13.5px} .fl_a-d{grid-area:dsc;margin:2px 0 0;font-size:11.5px;line-height:1.5} .fl_a-d .d-pc{display:none} .fl_a-d .d-sp{display:inline} .fl_a-rail{left:28px;right:auto;top:50px;bottom:34px;height:auto;width:0; border-top:0;border-left:1.8px dashed #c9ced6} .fl_a-dot{left:28px;top:28px} .fl_a-wrap.in .fl_a-dot,.in .fl_a-wrap .fl_a-dot{animation-name:fl_a-runSP} .fl_a-stage{padding:0 0 44px} .fl_a-loop{height:32px} .fl_a-loopsvg path{d:path("M56 2 a4 4 0 0 1 4 4 V22 a4 4 0 0 1 -4 4 H32 a4 4 0 0 1 -4 -4 V6 a4 4 0 0 1 4 -4")} .fl_a-chevs{display:none} .fl_a-cap{position:static;transform:none;margin:9px 0 0;padding:0 0 0 74px;text-align:left; white-space:normal;background:none} } @media(prefers-reduced-motion:reduce){ .fl_a-wrap *{animation:none!important;transition:none!important} .fl_a-dot{opacity:1;left:calc(100%/6/2)} .fl_a-n1{--lit:1} } @media(max-width:820px){} /* ===== 2026-09-03 監査の指摘を反映（判断の要らないものだけ） ===== */ /* 08/32 送信ボタンだけシアンになっていた。CTA-A（黒地のCTAはシアン）が実送信ボタンにも効いていた */ .sec-dark .cform .btn,.sec-dark form .btn{background:var(--c-cta);color:#fff} .sec-dark .cform .btn:hover,.sec-dark form .btn:hover{background:#c81b40} /* 11/28 iOS Safariは16px未満の入力欄にフォーカスすると自動ズームする */ .cform input,.cform textarea,.cform select{font-size:16px} /* 31 タップ領域44px（Appleのガイドライン）。DATAのタブが35.5pxだった */ .ds_a-tab{padding:14px 4px;min-height:44px;display:flex;align-items:center;justify-content:center} /* 41 FVの入場アニメでCTAが完全表示になるのが1.19秒後だった。3秒の40%を演出で消費していた */ .fv .cta-row{animation-delay:.2s!important} .fv .cta-row+.note,.fv .note{animation-delay:.26s!important} /* 39 04 DATAのパネル下に113px＋160pxの空白があり、直後がCTAだった */ @media(max-width:820px){ #data .ds_a-panels{margin-bottom:0} #data .wrap{padding-bottom:22px} } /* 25 ヒーローだけ .wrap の max-width 上書きが効いて、本文の左端が他14セクションと136〜186pxずれていた （右の擬似スマホはワイドのまま張り出させ、テキスト側だけサイト共通の左端に揃える） */ @media(min-width:821px){ .fv-hero .hero-grid>div:first-child{padding-left:max(0px,calc((100% - var(--w,1008px))/2 - 16px))} } /* 27 不安打ち消しがCTA8点のうち3点にしかなかった。固定バーは面積が取れないので主ボタン下に小さく */ /* 20 FVの数字の出所 ／ 09 送信後の説明 ／ 21 会社情報 */ .BB-note{margin:8px 0 0;font-size:11px;color:rgba(255,255,255,.5);letter-spacing:.02em} .sec-dark .cform-after,.cform-after{margin:0 0 12px;padding:11px 13px;background:#F4F6F8;border:1px solid #dfe3e9; border-radius:9px;font-size:12.5px;line-height:1.8;color:#4a4e55} .sec-dark .cform-after b,.cform-after b{color:#111215;font-weight:800} .sec-dark .cform-legal,.cform-legal{margin:11px 0 0;font-size:11.5px;line-height:1.75;color:#5f636a} .sec-dark .cform-legal a,.cform-legal a{color:#B01D36;text-decoration:underline} /* 18 本文CTAが画面内のときは固定バーを引っ込める ／ 30 料金通過後は主ボタンだけに */ .cta-fix.is-muted{transform:translateY(110%);pointer-events:none} .cta-fix.is-past-price{grid-template-columns:1fr} .cta-fix.is-past-price .fx-sub{display:none} /* 19で既定タブを「できる分析」にしたことで露出した番号バッジ。白文字が#FE2C55上で3.68だった */ .ds_a-badge{background:#E11D48} /* SOLDトーストの2行が4px重なっていた（実機のスクショで発覚）。行高に余裕を持たせる */ /* 🔴 .xsold p（0-1-1）が .NF-sold-title/note（0-1-0）に勝っていて、 font-size 12px / line-height 1.4 / margin 0 が両方に効き、2行が4px重なっていた */ .xsold--nf .NF-sold-title{font-size:14.5px;line-height:1.35;margin:0;color:#fff} .xsold--nf .NF-sold-note{font-size:10px;font-weight:500;line-height:1.4;margin:4px 0 0;color:#fff} .xsold--nf .NF-sold-main{gap:5px} /* 02 REASONS：カード01だけ図が199pxで、他3枚（100px）と見出しの高さが揃っていなかった （実測 h3のカード内top＝01:226px / 02,03,04:145px）。図の領域を揃えて見出しの位置を合わせる */ @media(min-width:821px){ #reasons .card>.rf_a-wrap,#reasons .card>.rdia{ min-height:150px;display:flex;align-items:center;justify-content:center;margin-bottom:0} #reasons .card>.rf_a-wrap svg{max-height:150px;width:auto} } /* ===== 02 REASONS：番号を左上の丸バッジに、見出しにマーカー（2026-09-03 江﨑さん指示） ===== 旧＝右上に40〜46pxの薄いアウトライン数字。03のカードでは図の丸と重なって読めなかった */ .cards--2 .card{padding-top:20px} .cards--2 .card::after{ content:counter(rsn); position:absolute;top:16px;left:18px;right:auto; width:28px;height:28px;border-radius:50%; background:var(--c-cta);color:#fff;-webkit-text-stroke:0; font-family:var(--f-num);font-size:14.5px;font-weight:800;line-height:28px; text-align:center;letter-spacing:0;opacity:1;z-index:2; } @media(min-width:821px){.cards--2 .card{padding-top:24px} .cards--2 .card::after{width:30px;height:30px;line-height:30px;font-size:15.5px;top:18px;left:20px}} /* 見出しにマーカー（下3割に淡い赤を敷く。行が折り返しても各行に付く） */ #reasons .card h3{ display:inline; background-image:linear-gradient(transparent 62%,rgba(254,44,85,.20) 62%); background-repeat:no-repeat; padding:0 .08em .06em; box-decoration-break:clone;-webkit-box-decoration-break:clone; line-height:1.72; } #reasons .card>h3{display:block} #reasons .card h3{display:inline-block} /* 03 CYCLE：戻り線を静止から「破線が右→左へ流れる」へ（2026-09-03 江﨑さん指示） ドットは走らせない（「最初にドットが返ってこなくて良い」の指示は維持）。 パスの進行方向が右→左なので、dashoffsetを負に動かすと循環方向に流れる。 dasharray 5 7＝周期12。-36で3周期ぶんを3.6秒＝1周期1.2秒のゆっくりした速度。 */ @keyframes fl_a-loopflow{from{stroke-dashoffset:0}to{stroke-dashoffset:-36}} .fl_a-wrap.in .fl_a-loopsvg path,.in .fl_a-wrap .fl_a-loopsvg path{ animation:fl_a-loopflow 3.6s linear infinite} /* チェブロンは流れに合わせて薄く明滅（到達点のポップと同じ扱い・1.2秒周期で流れと同期） */ @keyframes fl_a-cvpulse{0%,62%{opacity:.45}72%{opacity:1}100%{opacity:.45}} .fl_a-wrap.in .fl_a-cv,.in .fl_a-wrap .fl_a-cv{animation:fl_a-cvpulse 3.6s linear infinite} .fl_a-wrap.in .fl_a-cv:nth-of-type(2),.in .fl_a-wrap .fl_a-cv:nth-of-type(2){animation-delay:-1.8s} /* 03 CYCLE：黒一色で単調だったので、TikTokの2色を交互に入れる（2026-09-03 江﨑さん指示） 円の面に淡色を敷き、アイコンの線もその系統に。リングの発光（光-A）は上に重なる。 */ .fl_a-n1 .fl_a-disc,.fl_a-n3 .fl_a-disc,.fl_a-n5 .fl_a-disc{background:#FFF0F3} .fl_a-n2 .fl_a-disc,.fl_a-n4 .fl_a-disc,.fl_a-n6 .fl_a-disc{background:#E9FCFB} .fl_a-n1 .fl_a-ic,.fl_a-n3 .fl_a-ic,.fl_a-n5 .fl_a-ic{color:#C81B40} .fl_a-n2 .fl_a-ic,.fl_a-n4 .fl_a-ic,.fl_a-n6 .fl_a-ic{color:#0E8C88} .fl_a-n1 .fl_a-disc,.fl_a-n3 .fl_a-disc,.fl_a-n5 .fl_a-disc{border-color:#E8A9B8} .fl_a-n2 .fl_a-disc,.fl_a-n4 .fl_a-disc,.fl_a-n6 .fl_a-disc{border-color:#7FD8D4} /* 番号も系統に合わせる */ .fl_a-n1 .fl_a-num,.fl_a-n3 .fl_a-num,.fl_a-n5 .fl_a-num{color:#B01D36} .fl_a-n2 .fl_a-num,.fl_a-n4 .fl_a-num,.fl_a-n6 .fl_a-num{color:#0A6A66} /* 04 DATA「できる分析」：390pxで2列にしていたため項目名が折り返し、行の高さが不揃いになって 左右がズレて見えていた（実測：左列168px／右列158pxで、5項目中3項目が2行に折り返し）。 スマホは1列にする。 */ @media(max-width:600px){ .ds_a-list{grid-template-columns:1fr!important;gap:2px!important} .ds_a-list li{padding:4px 0} } /* 04 DATA「できる分析」＝F案（2026-09-03 江﨑さん選択） 見出しの「10」を左に大きく立て、右に10項目を2列で並べる。旧＝中央見出し＋2列チェックリスト */ .ds_a-fbox{display:grid;grid-template-columns:auto 1fr;gap:30px;align-items:start; max-width:830px;margin:22px auto 0;text-align:left} .ds_a-fl{min-width:132px;max-width:150px} .ds_a-fnum{display:block;font-size:46px;font-weight:900;color:#FE2C55;line-height:1;letter-spacing:-.02em} .ds_a-flt{display:block;font-size:12.5px;font-weight:800;color:#fff;margin:3px 0 9px} .ds_a-fld{margin:0;font-size:11px;color:rgba(255,255,255,.58);line-height:1.8} .ds_a-flist{display:grid;grid-template-columns:1fr 1fr;gap:4px 22px;list-style:none;margin:0;padding:0} .ds_a-flist li{font-size:11.5px;font-weight:700;color:#fff;padding:5px 0 5px 15px;position:relative; border-bottom:1px solid rgba(255,255,255,.09);line-height:1.55} .ds_a-flist li::before{content:"";position:absolute;left:0;top:11px;width:6px;height:6px; border-radius:50%;background:#25F4EE;opacity:.8} @media(max-width:600px){ .ds_a-fbox{grid-template-columns:1fr;gap:14px;margin-top:16px} .ds_a-fl{display:flex;align-items:baseline;gap:9px;min-width:0;flex-wrap:wrap} .ds_a-fnum{font-size:34px} .ds_a-flt{margin:0} .ds_a-fld{flex:1 0 100%;margin:2px 0 0;font-size:10.5px} .ds_a-flist{grid-template-columns:1fr;gap:1px} .ds_a-flist li{font-size:11.5px;padding:5px 0 5px 14px} } /* 04 DATA：レコードが積み上がる（E案・横に並べる／赤とシアン交互）2026-09-03 江﨑さん選択 🔴出現は左から順、消えるのは一斉。遅延をずらすと消える順が入れ替わって「まばら」に見えるため、 各段に個別のキーフレームを持たせて出現%だけずらす。 */ .dsk{width:170px;height:98px;display:block;margin:10px auto 0} .dsk-tp{stroke:rgba(255,255,255,.8);stroke-width:1.3;stroke-linejoin:round} .dsk-fr{fill:rgba(255,255,255,.07);stroke:rgba(255,255,255,.7);stroke-width:1.3;stroke-linejoin:round} .dsk-sd{fill:rgba(0,0,0,.42);stroke:rgba(255,255,255,.5);stroke-width:1.3;stroke-linejoin:round} .dsk-p{opacity:0} @keyframes dsk0{0%,0%{opacity:0;transform:translateY(7px)}4%{opacity:1;transform:translateY(0)}84%{opacity:1}90%,100%{opacity:0}} @keyframes dsk1{0%,6%{opacity:0;transform:translateY(7px)}10%{opacity:1;transform:translateY(0)}84%{opacity:1}90%,100%{opacity:0}} @keyframes dsk2{0%,12%{opacity:0;transform:translateY(7px)}16%{opacity:1;transform:translateY(0)}84%{opacity:1}90%,100%{opacity:0}} @keyframes dsk3{0%,18%{opacity:0;transform:translateY(7px)}22%{opacity:1;transform:translateY(0)}84%{opacity:1}90%,100%{opacity:0}} @keyframes dsk4{0%,24%{opacity:0;transform:translateY(7px)}28%{opacity:1;transform:translateY(0)}84%{opacity:1}90%,100%{opacity:0}} .ds_a-wrap.in .dsk-p0,.in .ds_a-wrap .dsk-p0{animation:dsk0 12s ease-in-out infinite} .ds_a-wrap.in .dsk-p1,.in .ds_a-wrap .dsk-p1{animation:dsk1 12s ease-in-out infinite} .ds_a-wrap.in .dsk-p2,.in .ds_a-wrap .dsk-p2{animation:dsk2 12s ease-in-out infinite} .ds_a-wrap.in .dsk-p3,.in .ds_a-wrap .dsk-p3{animation:dsk3 12s ease-in-out infinite} .ds_a-wrap.in .dsk-p4,.in .ds_a-wrap .dsk-p4{animation:dsk4 12s ease-in-out infinite} @media(prefers-reduced-motion:reduce){.dsk-p{opacity:1!important;animation:none!important}} /* FVの擬似スマホを28%縮小（2026-09-03 江﨑さん選択：「一面取るはデカすぎ」への対応） 実測: 285×524px → 205×377px。スマホの下のセクションが早く現れる */ .fv .stage{transform:scale(.72);transform-origin:top center} @media(max-width:820px){.fv .stage{height:389px}} @media(min-width:821px){.fv .stage{transform:scale(.78);transform-origin:top center}} /* 04 DATA「更新体制」：運用へ反映を3分岐に（2026-09-03 江﨑さん承認） 黒地なので線は白系。赤い点が3方向へ順に流れ、届いた円に赤いリングが一瞬出る。 */ .ds_a-fan3{width:250px;flex-shrink:0} .ds_a-fan3 svg{width:100%;height:auto;display:block;overflow:visible} .f3-tp{fill:none;stroke:rgba(255,255,255,.28);stroke-width:1.5;stroke-dasharray:3 4} .f3-nd{fill:rgba(255,255,255,.04);stroke:rgba(255,255,255,.55);stroke-width:1.6} .f3-ic{fill:none;stroke:rgba(255,255,255,.88);stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round} .f3-t{font-family:"Hiragino Sans",sans-serif;font-size:11.5px;font-weight:800;fill:#fff} .f3-s{font-family:"Hiragino Sans",sans-serif;font-size:8.5px;font-weight:600;fill:rgba(255,255,255,.55)} .f3-dot{fill:#FE2C55;opacity:0} .f3-dot.d1{offset-path:path("M14 78 H46 Q66 78 66 58 V26 Q66 6 86 6 H106")} .f3-dot.d2{offset-path:path("M14 78 H106")} .f3-dot.d3{offset-path:path("M14 78 H46 Q66 78 66 98 V130 Q66 150 86 150 H106")} .f3-ring{fill:none;stroke:#FE2C55;stroke-width:1.6;opacity:0} .ds_a-wrap.in .f3-dot,.in .ds_a-wrap .f3-dot{animation:f3dot 3.6s linear infinite} .ds_a-wrap.in .f3-ring,.in .ds_a-wrap .f3-ring{animation:f3ring 3.6s ease-out infinite} .f3-dot.d2,.f3-ring.g2{animation-delay:1.2s} .f3-dot.d3,.f3-ring.g3{animation-delay:2.4s} @keyframes f3dot{0%{opacity:0;offset-distance:0%}8%{opacity:1}70%{opacity:1;offset-distance:100%}76%,100%{opacity:0;offset-distance:100%}} @keyframes f3ring{0%,66%{opacity:0;r:19}74%{opacity:.9;r:24}86%,100%{opacity:0;r:26}} @media(max-width:820px){.ds_a-fan3{width:100%;max-width:250px;margin:6px auto 0}} @media(prefers-reduced-motion:reduce){.f3-dot,.f3-ring{animation:none!important;opacity:0!important}} /* 04 DATA：タブ切替の3パネルは同じセルに重ねているため、最も高いパネルに枠が合う。 「できる分析」は中身160pxで、340pxの枠に対し180pxの余白が下に出ていた（実測）。 → 中身を縦中央に置き、枠も内容に近づける。 */ .ds_a-panels{align-items:center;margin-top:26px} .ds_a-p{align-self:center} #data .wrap{padding-bottom:26px} .ds_a-fbox{margin-top:6px} @media(max-width:820px){.ds_a-panels{align-items:start}} /* 04 DATA「更新体制」：3分岐を入れて全体幅が変わったので、中央揃えとステップ幅を再調整 */ @media(min-width:821px){ .ds_a-flow{max-width:760px;align-items:center} .ds_a-step{width:150px} .ds_a-fan3{width:262px;margin-left:4px} } @media(max-width:820px){ .ds_a-flow{flex-direction:column;align-items:center;gap:6px;max-width:340px} .ds_a-fan3{width:100%;max-width:262px} } /* 03 CYCLE：塗り版イラスト（線幅1.3）に差し替えたので、円の淡色背景とアイコンの色指定を外す （イラスト自体が淡ピンク・赤・シアンを持つため、円まで色を敷くとコントラストが落ちる） */ .fl_a-n1 .fl_a-disc,.fl_a-n2 .fl_a-disc,.fl_a-n3 .fl_a-disc, .fl_a-n4 .fl_a-disc,.fl_a-n5 .fl_a-disc,.fl_a-n6 .fl_a-disc{background:#fff;border-color:#111215} .fl_a-n1 .fl_a-ic,.fl_a-n2 .fl_a-ic,.fl_a-n3 .fl_a-ic, .fl_a-n4 .fl_a-ic,.fl_a-n5 .fl_a-ic,.fl_a-n6 .fl_a-ic{color:#111215} .fl_a-ic{width:38px;height:38px} @media(max-width:820px){.fl_a-ic{width:30px;height:30px}} /* ===== 08 PRICING：C案（カードに線画イラスト）＋2026-09-03の新プラン内容 ===== 初期費用の内訳を上に独立させ、3プランは月額と含まれる業務だけにした。 */ .pc2-wrap{max-width:1008px;margin:0 auto} .pc2-lead{margin:0 0 20px;font-size:15px;color:var(--c-text-sub);line-height:1.9} .pc2-init{border:1px solid var(--c-line-strong);border-radius:14px;padding:16px 20px 18px;margin:0 0 20px;background:#fff} .pc2-inith{display:flex;align-items:baseline;gap:14px;flex-wrap:wrap;margin:0 0 10px} .pc2-initl{font-size:13px;font-weight:800;color:var(--c-text)} .pc2-initp{font-size:24px;font-weight:900;color:var(--c-text);letter-spacing:-.01em} .pc2-initp small{font-size:11.5px;font-weight:600;color:var(--c-text-mute);margin-left:5px} .pc2-initlist{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:7px 9px} .pc2-initlist li{font-size:12px;font-weight:700;color:var(--c-text-sub); border:1px solid var(--c-line);border-radius:999px;padding:5px 12px;background:#fff} .pc2-plans{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;align-items:stretch} .pc2-plan{position:relative;border:1px solid var(--c-line-strong);border-radius:16px;padding:20px 18px 22px;background:#fff} .pc2-reco{border-color:var(--c-brand);border-width:2px;background:#FFF6F8} .pc2-badge{position:absolute;top:-13px;left:50%;transform:translateX(-50%);white-space:nowrap; background:var(--c-cta);color:#fff;font-size:11.5px;font-weight:800;border-radius:999px;padding:5px 14px} .pc2-art{height:88px;display:grid;place-items:center;margin:0 0 12px} .pc2-art svg{width:100%;max-width:200px;height:auto;display:block} .pc2-name{font-size:20px;font-weight:900;margin:0 0 3px;letter-spacing:-.01em} .pc2-price{margin:0 0 14px;padding:0 0 14px;font-size:14px;font-weight:700;color:var(--c-text-sub); border-bottom:1px solid var(--c-line)} .pc2-list{list-style:none;margin:0;padding:0;display:grid;gap:9px} .pc2-list li{position:relative;padding-left:21px;font-size:13.5px;font-weight:600;line-height:1.6} .pc2-list li::before{content:"";position:absolute;left:2px;top:6px;width:11px;height:6px; border-left:2px solid var(--c-cta);border-bottom:2px solid var(--c-cta);transform:rotate(-45deg)} .pc2-note{max-width:760px;margin:20px auto 0;padding:13px 16px;background:#fff; border:1px solid var(--c-line-strong);border-radius:12px; font-size:12.5px;line-height:1.85;color:var(--c-text-mute);text-align:left} .pc2-note b{color:var(--c-text);font-weight:800} @media(max-width:900px){ .pc2-plans{grid-template-columns:1fr;gap:22px} .pc2-plan{padding:18px 16px 20px} .pc2-badge{top:-12px} .pc2-art{height:76px} .pc2-name{font-size:18px} .pc2-initp{font-size:21px} .pc2-note{font-size:12px;padding:12px 14px} } .pc2-plan{display:flex;flex-direction:column} .pc2-list{flex:1} /* 02 REASONS：1大＋2小（2026-09-03 江﨑さん判断） 自社MCN×自社DB を横2カラム占有の大カードへ格上げし、海外経験・量と質を小カードに降格 */ .card--big{grid-column:1 / -1} .rbig-figs{display:grid;grid-template-columns:1fr auto 1fr;gap:10px;align-items:center; min-height:150px;margin:0 0 4px} .rbig-f{display:flex;align-items:center;justify-content:center} .rbig-f>div{width:100%;display:flex;align-items:center;justify-content:center} .rbig-f svg{width:100%;max-width:300px;height:auto;display:block} .rbig-x{font-size:22px;font-weight:900;color:var(--c-line-strong);line-height:1} .card--big h3{font-size:20px} .rbig-p2{margin-top:8px} @media(max-width:820px){ .rbig-figs{grid-template-columns:1fr;gap:6px;min-height:0} .rbig-x{display:none} .card--big h3{font-size:17px} .rbig-f svg{max-width:260px} } /* 05 CASTING末尾のCTA：導入文はピルに収まらない長さなので通常テキストで置く */ .cs_a-cta-lead{max-width:620px;margin:26px auto 14px;text-align:center; font-size:14px;line-height:1.9;color:var(--c-text-sub);font-weight:600} @media(max-width:820px){.cs_a-cta-lead{font-size:13px;margin:20px auto 12px;text-align:left}} /* 副次CTA：資料請求（相談ボタンの脇に置く。主従が逆転しないよう地は白・枠線のみ） */ .btn--ghost{background:#fff;color:var(--c-text);border:1px solid var(--c-line-strong); box-shadow:none;font-weight:700} .btn--ghost:hover{background:var(--c-bg-sub);border-color:var(--c-text-sub);color:var(--c-text)} .sec-dark .btn--ghost{background:transparent;color:#fff;border-color:rgba(255,255,255,.55)} .sec-dark .btn--ghost:hover{background:rgba(255,255,255,.1);border-color:#fff;color:#fff} .cta-inline{display:flex;flex-wrap:wrap;gap:12px;justify-content:center;align-items:center} .cta-inline .note{flex-basis:100%} @media(max-width:560px){.cta-inline .btn{width:100%;max-width:340px}} /* 日本語の改行位置：文節で折り返す（「経/験」「所属し/ています」のような切れ方を防ぐ） word-break:auto-phrase = 形態素解析して文節で折る。未対応ブラウザは通常の折り返しに戻るだけ。 text-wrap:pretty = 最終行に1〜2文字だけ残る「孤立行」を防ぐ。 */ h1,h2,h3,h4,p,li,summary,figcaption,dd,dt,.lead,.note{ word-break:auto-phrase; text-wrap:pretty; line-break:strict; } /* 表・数値・ボタンのラベルは文節折りしない（意図した1行を保つ） */ .btn,th,td,.pc2-price,.pill,[class*="badge"],[class*="chip"],[class*="tag"]{ word-break:normal;text-wrap:nowrap } .btn{text-wrap:balance} /* ── 03 CYCLE：丸に当たったらTikTokシアンで光る ＋ イラストを大きく（2026-09-03 江崎さん指示） 🔴 旧実装は color-mix(... calc(var(--lit)*100%) ...) で色を作っていたが、 percentage引数にvar()入りcalcを渡すと無効値になりフォールバックの黒に落ちていた（実測で確認）。 opacity は var() をそのまま受けるので、シアンのリングを重ねて opacity:var(--lit) で光らせる。 */ .fl_a-wrap .fl_a-disc{border-color:#111215;border-width:1.8px;overflow:visible} .fl_a-wrap .fl_a-disc::after{ content:"";position:absolute;inset:-3.5px;border-radius:50%; border:2.8px solid #25F4EE; opacity:var(--lit); box-shadow:0 0 12px rgba(37,244,238,.95), 0 0 26px rgba(37,244,238,.5), inset 0 0 10px rgba(37,244,238,.4); pointer-events:none} /* 図を大きく：丸 72→86px、イラスト 38→50px */ .fl_a-wrap .fl_a-disc{width:86px;height:86px} .fl_a-wrap .fl_a-ic{width:50px;height:50px} @media(max-width:820px){ .fl_a-wrap .fl_a-disc{width:68px;height:68px} .fl_a-wrap .fl_a-ic{width:40px;height:40px} } @media(prefers-reduced-motion:reduce){ .fl_a-wrap .fl_a-disc::after{opacity:0} } /* ── 03 CYCLE 末尾：「回すほど精度が上がる」を版の積み上がりで見せる（2026-09-03 江崎さん指示） 文章だけだった loopnote を、1周目→3周目でバーが伸びるイラストに置き換える。 */ .lpv{max-width:760px;margin:26px auto 0;text-align:center} .lpv-lead{margin:0 0 18px;font-size:15px;line-height:1.9;color:var(--c-text)} .lpv-lead strong{color:#B01D36;font-weight:800} .lpv-row{display:flex;align-items:flex-end;justify-content:center;gap:14px} .lpv-step{display:flex;flex-direction:column;align-items:center;gap:7px; padding:14px 16px 12px;border-radius:14px;background:#fff; border:1px solid var(--c-line);min-width:112px} .lpv-step--on{border-color:#111215;border-width:1.6px;box-shadow:0 2px 10px rgba(17,18,21,.07)} .lpv-ill{display:block;width:84px} .lpv-ill svg{display:block;width:100%;height:auto} .lpv-v{font-family:Inter,system-ui,sans-serif;font-size:14px;font-weight:800;color:#B01D36; letter-spacing:.02em;font-variant-numeric:tabular-nums} .lpv-step--on .lpv-v{color:#111215} .lpv-lbl{font-size:11px;font-weight:700;color:var(--c-text-sub);letter-spacing:.06em} .lpv-ar{width:22px;height:2px;border-radius:1px;background:var(--c-line-strong); position:relative;margin-bottom:34px;flex:none} .lpv-ar::after{content:"";position:absolute;right:-1px;top:-3.5px; border-left:7px solid var(--c-line-strong);border-top:4.5px solid transparent;border-bottom:4.5px solid transparent} .lpv-cap{margin:14px 0 0;font-size:12.5px;line-height:1.85;color:var(--c-text-sub)} /* 出現：左から順に立ち上がる。バーは下から伸びる */ .lpv .lpv-step,.lpv .lpv-ar{opacity:0;transform:translateY(10px)} .lpv.in .lpv-step,.in .lpv .lpv-step,.lpv.in .lpv-ar,.in .lpv .lpv-ar{ animation:lpv-up .5s cubic-bezier(.2,.7,.3,1) forwards} .lpv.in .lpv-step:nth-of-type(1),.in .lpv .lpv-step:nth-of-type(1){animation-delay:.05s} .lpv.in .lpv-ar:nth-of-type(2),.in .lpv .lpv-ar:nth-of-type(2){animation-delay:.22s} .lpv.in .lpv-row>*:nth-child(3),.in .lpv .lpv-row>*:nth-child(3){animation-delay:.34s} .lpv.in .lpv-row>*:nth-child(4),.in .lpv .lpv-row>*:nth-child(4){animation-delay:.5s} .lpv.in .lpv-row>*:nth-child(5),.in .lpv .lpv-row>*:nth-child(5){animation-delay:.62s} @keyframes lpv-up{to{opacity:1;transform:none}} @media(max-width:640px){ .lpv-row{gap:8px} .lpv-step{min-width:0;flex:1;padding:11px 8px 10px} .lpv-ill{width:100%;max-width:74px} .lpv-ar{width:12px;margin-bottom:30px} .lpv-lead{font-size:14px} } @media(prefers-reduced-motion:reduce){ .lpv .lpv-step,.lpv .lpv-ar{opacity:1;transform:none;animation:none} } /* 暗い背景のCTAもシアンでなく赤にする（他セクションと同じ色に揃える。2026-09-03 江崎さん指示） */ .sec-dark .btn:not(.btn--ghost){background:var(--c-cta);color:#fff} .sec-dark .btn:not(.btn--ghost):hover{background:#c81b40;color:#fff} /* ── 04 DATA「更新体制」：右3つを左の丸と同じ大きさに揃え、線を繋ぎ、アイコン自体を動かす （2026-09-03 江崎さん指示「線途切れてる／右3個まだ小さい／イラスト自体も動かして」） */ .ds_a-flow .ds_a-fan3{width:344px;max-width:344px;margin-left:0} .ds_a-flow .ds_a-seg{max-width:96px} .f3-tp{stroke-width:1.8} .f3-nd{stroke-width:1.9} .f3-ic{stroke-width:2} .f3-t{font-size:14px} .f3-s{font-size:11px} .f3-dot.d1{offset-path:path("M28 105 H62 Q88 105 88 79 V38 Q88 10 114 10 H132")} .f3-dot.d2{offset-path:path("M28 105 H132")} .f3-dot.d3{offset-path:path("M28 105 H62 Q88 105 88 131 V172 Q88 200 114 200 H132")} /* アイコン内の動き。各グループのアニメーションはノードが光る周期に合わせる（3.6s） */ @keyframes f3draw{0%,8%{stroke-dasharray:44;stroke-dashoffset:44}30%,72%{stroke-dashoffset:0}88%,100%{stroke-dashoffset:44}} @keyframes f3pop{0%,14%{transform:scale(0);opacity:0}30%{transform:scale(1.25);opacity:1}40%,74%{transform:scale(1);opacity:1}88%,100%{transform:scale(0);opacity:0}} @keyframes f3bob{0%,100%{transform:translateY(0)}45%{transform:translateY(-2.4px)}} @keyframes f3slide{0%,12%{transform:translateX(-5px);opacity:0}32%,72%{transform:translateX(0);opacity:1}88%,100%{transform:translateX(5px);opacity:0}} .in .ds_a-wrap .f3-draw{animation:f3draw 3.6s ease-in-out infinite} .in .ds_a-wrap .f3-pop{animation:f3pop 3.6s ease-out infinite;transform-box:fill-box;transform-origin:center} .in .ds_a-wrap .f3-bob{animation:f3bob 3.6s ease-in-out infinite;transform-box:fill-box;transform-origin:center} .in .ds_a-wrap .f3-slide{animation:f3slide 3.6s ease-out infinite;transform-box:fill-box;transform-origin:center} /* 3系統は1.2秒ずつずらして順に動かす（点が到達する順と揃える） */ .in .ds_a-wrap .f3-a2 .f3-bob,.in .ds_a-wrap .f3-a2 .f3-slide{animation-delay:1.2s} .in .ds_a-wrap .f3-a3 .f3-draw,.in .ds_a-wrap .f3-a3 .f3-pop{animation-delay:2.4s} @media(max-width:900px){ .ds_a-flow .ds_a-fan3{width:100%;max-width:344px;margin:6px auto 0} .ds_a-flow .ds_a-seg{max-width:none} } @media(prefers-reduced-motion:reduce){ .f3-draw,.f3-pop,.f3-bob,.f3-slide{animation:none!important;opacity:1!important; stroke-dashoffset:0!important;transform:none!important} } /* 日本語の1行は35文字を超えると文節が入りきらず途中で折れる（「毎/週明示し」等が実測で発生）。 リード文の行長を詰めて、auto-phrase が文節で折れる余地を作る。 */ .lead,.sec-lead{max-width:600px} @media(max-width:820px){.lead,.sec-lead{max-width:none}} /* ── 05 CASTING：イラストを大きくし、4枚それぞれに意味のある動きを付ける （2026-09-03 江崎さん「イラスト小さい／アニメーション化されてない」「02と同等以上に」） 周期は8sで揃え、4枚が左から順に始まる。動きは全部「工程で起きていること」を写す。 */ .cs_a-wrap .cs_a-icon{width:124px;height:124px} @media(max-width:820px){.cs_a-wrap .cs_a-icon{width:84px;height:84px;flex:0 0 84px}} .cs_a-icon svg{width:100%;height:100%;display:block;overflow:visible} /* 01 売れている商品から探す：リストを上から走査し、当たり（赤い行）で止まって矢印がクリエイターを指す */ @keyframes k1hit{0%,10%{transform:scale(1);filter:none}18%{transform:scale(1.35)} 26%,64%{transform:scale(1.15);filter:drop-shadow(0 0 3px rgba(254,44,85,.75))}74%,100%{transform:scale(1);filter:none}} @keyframes k1row{0%,14%{opacity:1}22%,60%{opacity:.32}70%,100%{opacity:1}} @keyframes k1arc{0%,26%{opacity:0;stroke-dasharray:16;stroke-dashoffset:16}36%{opacity:1} 44%,68%{opacity:1;stroke-dashoffset:0}78%,100%{opacity:0;stroke-dashoffset:16}} @keyframes k1tip{0%,34%{opacity:0;transform:translateX(-4px)}44%,68%{opacity:1;transform:translateX(0)}78%,100%{opacity:0}} @keyframes k1cr{0%,44%{transform:translateY(0)}52%{transform:translateY(-3.5px)}60%,100%{transform:translateY(0)}} .in .cs_a-wrap .k1-hit,.cs_a-wrap.in .k1-hit{animation:k1hit 8s ease-in-out infinite;transform-box:fill-box;transform-origin:center} .in .cs_a-wrap .k1-r2,.cs_a-wrap.in .k1-r2{animation:k1row 8s ease-in-out .1s infinite} .in .cs_a-wrap .k1-r3,.cs_a-wrap.in .k1-r3{animation:k1row 8s ease-in-out .2s infinite} .in .cs_a-wrap .k1-arc,.cs_a-wrap.in .k1-arc{animation:k1arc 8s ease-out infinite} .in .cs_a-wrap .k1-tip,.cs_a-wrap.in .k1-tip{animation:k1tip 8s ease-out infinite;transform-box:fill-box} .in .cs_a-wrap .k1-cr,.cs_a-wrap.in .k1-cr{animation:k1cr 8s cubic-bezier(.34,1.56,.64,1) infinite;transform-box:fill-box;transform-origin:center bottom} /* 02 絞って打診：紙飛行機が飛び、選んだ1人が前に出て、承諾のチェックが返る */ @keyframes k2plane{0%,8%{opacity:0;transform:translate(-10px,8px) rotate(-14deg)} 20%{opacity:1;transform:translate(0,0) rotate(0)} 46%{opacity:1;transform:translate(4px,-3px) rotate(4deg)} 62%{opacity:0;transform:translate(18px,-12px) rotate(12deg)}100%{opacity:0}} @keyframes k2pick{0%,22%{transform:translateY(0) scale(1)}34%{transform:translateY(-4px) scale(1.06)} 46%,100%{transform:translateY(0) scale(1)}} @keyframes k2ok{0%,52%{opacity:0;transform:scale(.3)}62%{opacity:1;transform:scale(1.3)} 70%,88%{opacity:1;transform:scale(1)}96%,100%{opacity:0;transform:scale(.3)}} @keyframes k2okp{0%,58%{stroke-dasharray:14;stroke-dashoffset:14}70%,100%{stroke-dashoffset:0}} .in .cs_a-wrap .k2-plane,.cs_a-wrap.in .k2-plane{animation:k2plane 8s ease-in-out .3s infinite;transform-box:fill-box;transform-origin:center} .in .cs_a-wrap .k2-pick,.cs_a-wrap.in .k2-pick{animation:k2pick 8s cubic-bezier(.34,1.56,.64,1) .3s infinite;transform-box:fill-box;transform-origin:center bottom} .in .cs_a-wrap .k2-ok,.cs_a-wrap.in .k2-ok{animation:k2ok 8s cubic-bezier(.34,1.56,.64,1) .3s infinite;transform-box:fill-box;transform-origin:center} .in .cs_a-wrap .k2-okp,.cs_a-wrap.in .k2-okp{animation:k2okp 8s ease-out .3s infinite} /* 03 制作に伴走：やり取りの吹き出しが点滅し、カチンコが鳴り、原稿にチェックが入る */ @keyframes k3dot{0%,12%{opacity:.25}20%,34%{opacity:1}42%,100%{opacity:.25}} @keyframes k3clap{0%,30%{transform:rotate(-12deg)}38%{transform:rotate(-27deg)}46%{transform:rotate(-9deg)} 54%,100%{transform:rotate(-12deg)}} @keyframes k3chk{0%,58%{stroke-dasharray:24;stroke-dashoffset:24}72%,92%{stroke-dashoffset:0}100%{stroke-dashoffset:24}} .in .cs_a-wrap .k3-d1,.cs_a-wrap.in .k3-d1{animation:k3dot 8s ease-in-out .6s infinite} .in .cs_a-wrap .k3-d2,.cs_a-wrap.in .k3-d2{animation:k3dot 8s ease-in-out .78s infinite} .in .cs_a-wrap .k3-d3,.cs_a-wrap.in .k3-d3{animation:k3dot 8s ease-in-out .96s infinite} .in .cs_a-wrap .k3-clap,.cs_a-wrap.in .k3-clap{animation:k3clap 8s cubic-bezier(.34,1.56,.64,1) .6s infinite;transform-origin:32px 35px} .in .cs_a-wrap .k3-chk,.cs_a-wrap.in .k3-chk{animation:k3chk 8s ease-out .6s infinite} /* 04 公開、そして次へ：実績のグラフが伸びて終点が光り、輪が1周して次の周へ */ @keyframes k4line{0%,10%{stroke-dasharray:52;stroke-dashoffset:52}30%,66%{stroke-dashoffset:0}80%,100%{stroke-dashoffset:52}} @keyframes k4end{0%,28%{opacity:0;transform:scale(0)}38%{opacity:1;transform:scale(1.5)} 46%,66%{opacity:1;transform:scale(1)}78%,100%{opacity:0;transform:scale(0)}} @keyframes k4spin{0%,62%{transform:rotate(0)}92%,100%{transform:rotate(360deg)}} .in .cs_a-wrap .k4-line,.cs_a-wrap.in .k4-line{animation:k4line 8s ease-out .9s infinite} .in .cs_a-wrap .k4-end,.cs_a-wrap.in .k4-end{animation:k4end 8s cubic-bezier(.34,1.56,.64,1) .9s infinite;transform-box:fill-box;transform-origin:center} .in .cs_a-wrap .k4-spin,.cs_a-wrap.in .k4-spin{animation:k4spin 8s cubic-bezier(.5,.05,.3,1) .9s infinite;transform-origin:48px 38px} @media(prefers-reduced-motion:reduce){ .cs_a-wrap [class^="k1-"],.cs_a-wrap [class^="k2-"],.cs_a-wrap [class^="k3-"],.cs_a-wrap [class^="k4-"]{ animation:none!important;opacity:1!important;transform:none!important;stroke-dashoffset:0!important} } /* ── 08 PRICING：3プランの図を新ラベル（テスト検証／土台作り／本格運用）に合わせて刷新し、 それぞれに動きを付ける。Performance も色で選べるようにする。（2026-09-03 江崎さん指示） */ .pc2-art{height:104px} .pc2-art svg{max-width:216px} @media(max-width:820px){.pc2-art{height:96px}} /* Starter：1本つくって → 数字で確かめる */ @keyframes pa1play{0%,12%{transform:scale(1)}20%{transform:scale(1.12)}30%,100%{transform:scale(1)}} @keyframes pa1ar{0%,22%{opacity:.25;transform:translateX(-3px)}34%,100%{opacity:1;transform:translateX(0)}} @keyframes pa1g{0%,30%{stroke-dasharray:82;stroke-dashoffset:82}62%,100%{stroke-dashoffset:24}} @keyframes pa1nd{0%,34%{opacity:0;transform:scale(0)}48%{opacity:1;transform:scale(1.4)}58%,100%{opacity:1;transform:scale(1)}} @keyframes pa1ck{0%,62%{stroke-dasharray:20;stroke-dashoffset:20;opacity:0}70%{opacity:1}80%,100%{stroke-dashoffset:0;opacity:1}} .pc2-wrap.in .pa1-play,.in .pc2-wrap .pa1-play{animation:pa1play 5.4s cubic-bezier(.34,1.56,.64,1) infinite;transform-box:fill-box;transform-origin:center} .pc2-wrap.in .pa1-ar,.in .pc2-wrap .pa1-ar{animation:pa1ar 5.4s ease-out infinite} .pc2-wrap.in .pa1-g,.in .pc2-wrap .pa1-g{animation:pa1g 5.4s cubic-bezier(.3,.7,.3,1) infinite} .pc2-wrap.in .pa1-nd,.in .pc2-wrap .pa1-nd{animation:pa1nd 5.4s cubic-bezier(.34,1.56,.64,1) infinite;transform-box:fill-box;transform-origin:center} .pc2-wrap.in .pa1-ck,.in .pc2-wrap .pa1-ck{animation:pa1ck 5.4s ease-out infinite} /* Growth：段が積み上がり、起用する人が増える */ @keyframes pa2blk{0%,8%{opacity:0;transform:translateY(9px)}22%,100%{opacity:1;transform:translateY(0)}} @keyframes pa2per{0%,10%{opacity:0;transform:translateY(7px) scale(.9)}26%,100%{opacity:1;transform:none}} .pc2-wrap.in .pa2-b1,.in .pc2-wrap .pa2-b1{animation:pa2blk 5.4s cubic-bezier(.34,1.56,.64,1) infinite} .pc2-wrap.in .pa2-b2,.in .pc2-wrap .pa2-b2{animation:pa2blk 5.4s cubic-bezier(.34,1.56,.64,1) .16s infinite} .pc2-wrap.in .pa2-b3,.in .pc2-wrap .pa2-b3{animation:pa2blk 5.4s cubic-bezier(.34,1.56,.64,1) .32s infinite} .pc2-wrap.in .pa2-p1,.in .pc2-wrap .pa2-p1{animation:pa2per 5.4s cubic-bezier(.34,1.56,.64,1) .5s infinite;transform-box:fill-box;transform-origin:center bottom} .pc2-wrap.in .pa2-p2,.in .pc2-wrap .pa2-p2{animation:pa2per 5.4s cubic-bezier(.34,1.56,.64,1) .66s infinite;transform-box:fill-box;transform-origin:center bottom} .pc2-wrap.in .pa2-p3,.in .pc2-wrap .pa2-p3{animation:pa2per 5.4s cubic-bezier(.34,1.56,.64,1) .82s infinite;transform-box:fill-box;transform-origin:center bottom} /* Performance：動画・LIVE・広告が同時に回り、売上の棒が伸びる */ @keyframes pa3v{0%,10%{transform:scale(1)}18%{transform:scale(1.18)}28%,100%{transform:scale(1)}} @keyframes pa3live{0%,100%{opacity:1}50%{opacity:.35}} @keyframes pa3w{0%,20%{opacity:0}34%{opacity:1}62%{opacity:.2}76%,100%{opacity:0}} @keyframes pa3bar{0%,26%{transform:scaleY(0)}46%,100%{transform:scaleY(1)}} .pc2-wrap.in .pa3-v,.in .pc2-wrap .pa3-v{animation:pa3v 5.4s cubic-bezier(.34,1.56,.64,1) infinite;transform-box:fill-box;transform-origin:center} .pc2-wrap.in .pa3-live,.in .pc2-wrap .pa3-live{animation:pa3live 1.6s ease-in-out infinite} .pc2-wrap.in .pa3-w1,.in .pc2-wrap .pa3-w1{animation:pa3w 5.4s ease-out .1s infinite} .pc2-wrap.in .pa3-w2,.in .pc2-wrap .pa3-w2{animation:pa3w 5.4s ease-out .28s infinite} .pc2-wrap.in .pa3-r1,.in .pc2-wrap .pa3-r1{animation:pa3bar 5.4s cubic-bezier(.3,.7,.3,1) infinite;transform-box:fill-box;transform-origin:center bottom} .pc2-wrap.in .pa3-r2,.in .pc2-wrap .pa3-r2{animation:pa3bar 5.4s cubic-bezier(.3,.7,.3,1) .14s infinite;transform-box:fill-box;transform-origin:center bottom} .pc2-wrap.in .pa3-r3,.in .pc2-wrap .pa3-r3{animation:pa3bar 5.4s cubic-bezier(.3,.7,.3,1) .28s infinite;transform-box:fill-box;transform-origin:center bottom} /* Performance を色で選べるようにする（Growth＝標準／Performance＝最大規模、の2択に見せる） */ .pc2-plan.pc2-perf{border-color:#111215;border-width:1.6px;background:linear-gradient(#fff,#fff) padding-box} .pc2-badge--perf{background:#111215;color:#fff} @media(prefers-reduced-motion:reduce){ .pc2-wrap [class^="pa1-"],.pc2-wrap [class^="pa2-"],.pc2-wrap [class^="pa3-"]{ animation:none!important;opacity:1!important;transform:none!important;stroke-dashoffset:0!important} } /* プラン内の項目数が違うと、flex:1 で行間が引き伸ばされて間延びする。上詰めにする。 */ .pc2-list{display:flex;flex-direction:column;justify-content:flex-start;gap:10px} .pc2-list li{margin:0} /* ── 06 REPORT：D案「クリップボードの上でペンが走る」（2026-09-03 江崎さんが4案から選択） スクロールで画面に入ったとき1回だけ再生。ペンが上から下へ移動し、通った行にチェックが描かれる。 */ .rep-board{position:relative;background:#fff;border:2px solid #111215;border-radius:14px; padding:28px 20px 20px} .rep-clip{position:absolute;left:50%;top:-10px;transform:translateX(-50%); width:84px;height:18px;background:#111215;border-radius:6px} .repcard .rep-items{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:1fr;gap:11px} .repcard .rep-li{display:flex;align-items:center;gap:12px;font-size:14px;font-weight:700; line-height:1.5;color:#111215;opacity:1;transform:none;animation:none} .rep-bx{width:23px;height:23px;flex:none;border:2px solid #c2c5cb;border-radius:6px; display:grid;place-items:center;background:#fff} .rep-li.rep-hot{color:#B01D36} .rep-ck{width:100%;height:100%;padding:2.4px;box-sizing:border-box} .rep-ck path{fill:none;stroke:#FE2C55;stroke-width:3.2;stroke-linecap:round;stroke-linejoin:round; stroke-dasharray:22;stroke-dashoffset:22} .repcard.in .rep-bx,.in .repcard .rep-bx{animation:repbox .3s ease-out var(--rd) forwards} .repcard.in .rep-hot .rep-bx,.in .repcard .rep-hot .rep-bx{animation:repboxHot .3s ease-out var(--rd) forwards} .repcard.in .rep-ck path,.in .repcard .rep-ck path{animation:repdraw .28s ease-out calc(var(--rd) + .1s) forwards} @keyframes repbox{to{border-color:#111215}} @keyframes repboxHot{to{border-color:#E11D48;background:#FDEBEF}} @keyframes repdraw{to{stroke-dashoffset:0}} .rep-pen{position:absolute;left:16px;top:24px;width:30px;height:30px;opacity:0; filter:drop-shadow(0 2px 5px rgba(17,18,21,.22));pointer-events:none} .repcard.in .rep-pen,.in .repcard .rep-pen{animation:reppen 3.5s cubic-bezier(.5,.02,.3,1) .1s forwards} @keyframes reppen{ 0%{opacity:0;transform:translate(-18px,-8px) rotate(-10deg)} 8%{opacity:1;transform:translate(0,0) rotate(0)} 16%{transform:translate(6px,4px) rotate(7deg)} 22%{transform:translate(0,34px) rotate(0)} 30%{transform:translate(6px,38px) rotate(7deg)}36%{transform:translate(0,68px) rotate(0)} 44%{transform:translate(6px,72px) rotate(7deg)}50%{transform:translate(0,102px) rotate(0)} 58%{transform:translate(6px,106px) rotate(7deg)}64%{transform:translate(0,136px) rotate(0)} 72%{transform:translate(6px,140px) rotate(7deg)}78%{transform:translate(0,170px) rotate(0)} 86%{transform:translate(6px,174px) rotate(7deg)}93%{opacity:1;transform:translate(0,176px)} 100%{opacity:0;transform:translate(28px,184px) rotate(-12deg)}} @media(max-width:820px){ .rep-board{padding:26px 14px 16px} .repcard .rep-li{font-size:13px;gap:10px} .rep-pen{left:10px;width:26px;height:26px} } @media(prefers-reduced-motion:reduce){ .rep-pen{display:none} .rep-bx{border-color:#111215} .rep-hot .rep-bx{border-color:#E11D48;background:#FDEBEF} .rep-ck path{stroke-dashoffset:0!important;animation:none!important} } /* D案は縦1列なので、横幅いっぱいだと右が大きく空く。内容幅に合わせる。 */ .rep-board{max-width:600px} @media(max-width:820px){.rep-board{max-width:none}} /* 🔴 固定CTAが画面下で切れて見える不具合（2026-09-03 江崎さん「右下CTAおかしい」） .is-muted は「セクション内のCTAが見えている間はバーを引っ込める」ためのもの。 ところが PC版は bottom:22px 浮いているので translateY(110%) では 22px 分が隠しきれず、 ボタンが27px はみ出して文字が半分だけ見える状態になっていた（画面高520pxで再現）。 浮かせている分も足して確実に画面外へ送る。 */ @media(min-width:768px){ .cta-fix.is-muted{transform:translateY(calc(100% + 34px))} } /* 隠す状態は3つある（素／is-muted／is-past-price）。PC版は bottom:22px 浮いているため、 どれも translateY(%) だけでは 4px だけ画面に残る（実測）。全部同じ式で完全に画面外へ送る。 */ @media(min-width:768px){ .cta-fix, .cta-fix.is-muted, .cta-fix.is-past-price:not(.is-on){transform:translateY(calc(100% + 34px))} .cta-fix.is-on:not(.is-muted):not(.is-past-price){transform:none} } /* 🔴 図中の文字をSVGのに置くと、viewBoxが縮む幅で10px未満になる（375pxで実測5.5px）。 HTML要素に出して最小11pxを保証する。（2026-09-03 目視チェックで発見） */ .rf_a-wrap{position:relative;padding-bottom:20px} .rcmp-mid,.rcmp-l,.rcmp-r{position:absolute;font-size:11px;line-height:1.3;white-space:nowrap; font-family:"Hiragino Sans",sans-serif;color:var(--c-text)} .rcmp-mid{left:50%;transform:translateX(-50%);top:28%;color:var(--c-text-sub);font-weight:600} .rcmp-l,.rcmp-r{bottom:0;font-weight:700} .rcmp-l{left:20.5%;transform:translateX(-50%)} .rcmp-r{left:79.5%;transform:translateX(-50%)} /* ── 05 CASTING：B改（円環＋外側に刈り取りの枝）2026-09-03 江崎さん選択。文言は要約済み */ /* ── 05 CASTING / B改：円環＋外側に刈り取りの枝（イラスト入り） key=b1 ──────── */ .v3_b1-wrap{ --v3_b1-R:160px; /* 円環の半径 */ --v3_b1-iw:100px; /* イラストSVGの幅（96:76） */ --v3_b1-ih:79px; /* イラストSVGの高さ */ --v3_b1-ip:6px; /* タイルの内側余白 */ --v3_b1-cw:116px; /* タイル幅 = iw + ip*2 + 枠2*2 */ --v3_b1-ch:95px; /* タイル高 = ih + ip*2 + 枠2*2 */ --v3_b1-cy:276px; /* 円の中心のY */ --v3_b1-ox:-30px; /* 円の中心を横にずらす量（②のラベルが長いぶん左へ） */ --v3_b1-hub:184px; /* 中心ハブの直径 */ --v3_b1-stageh:562px; position:relative;color:#111215;line-break:strict; font-family:'Hiragino Sans','Hiragino Kaku Gothic ProN','Yu Gothic','Noto Sans JP',sans-serif; } .v3_b1-wrap *{box-sizing:border-box} /* ── 凡例 ───────────────────────────────────────────────────────── */ .v3_b1-head{display:flex;flex-wrap:wrap;gap:5px 20px;margin:0 0 12px} .v3_b1-lg{display:inline-flex;align-items:center;gap:7px;font-size:11.5px;line-height:1.7;color:#3a3c40} .v3_b1-lgi{flex:none;width:13px;height:13px;border-radius:50%;border:3px solid #FE2C55} .v3_b1-lgB .v3_b1-lgi{width:17px;height:0;border:0;border-top:3px dashed #E11D48;border-radius:0} /* ── 舞台 ───────────────────────────────────────────────────────── */ .v3_b1-stage{position:relative;height:var(--v3_b1-stageh)} .v3_b1-loop{display:contents} .v3_b1-ring{position:absolute;left:calc(50% + var(--v3_b1-ox));top:var(--v3_b1-cy); width:calc(var(--v3_b1-R) * 2.075);height:calc(var(--v3_b1-R) * 2.075); transform:translate(-50%,-50%)} /* ── ①〜④のノード（イラストタイル＋番号バッジ） ──────────────────── */ .v3_b1-step{display:contents} .v3_b1-ico{position:absolute;display:block; width:var(--v3_b1-cw);height:var(--v3_b1-ch);padding:var(--v3_b1-ip); background:#ffffff;border:2px solid #F0AFC0;border-radius:16px} .v3_b1-art{display:block;width:100%;height:100%} .v3_b1-art > svg{display:block;width:100%;height:100%} .v3_b1-num{position:absolute;left:-9px;top:-9px;z-index:2; display:flex;align-items:center;justify-content:center; width:26px;height:26px;border-radius:50%; background:#E11D48;border:2px solid #ffffff; color:#ffffff;font-size:13px;font-weight:700;line-height:1;font-style:normal} .v3_b1-lab{position:absolute;min-width:0} .v3_b1-lt{margin:0;font-size:14px;font-weight:700;line-height:1.55} .v3_b1-ls{margin:4px 0 0;font-size:11.5px;line-height:1.65;color:#3a3c40} .v3_b1-nb{white-space:nowrap} .v3_b1-sup{display:inline-block;margin:0 6px 0 0;padding:0 5px;border-radius:4px; background:#FDEBEF;color:#B01D36;font-size:11.5px;font-weight:700;line-height:1.5} .v3_b1-rt{display:block;margin:3px 0 0;color:#B01D36;font-weight:700;font-style:normal} /* ① 12時 */ .v3_b1-s1 .v3_b1-ico{left:calc(50% + var(--v3_b1-ox));top:calc(var(--v3_b1-cy) - var(--v3_b1-R));transform:translate(-50%,-50%)} .v3_b1-s1 .v3_b1-lab{left:calc(50% + var(--v3_b1-ox));top:calc(var(--v3_b1-cy) - var(--v3_b1-R) - var(--v3_b1-ch)/2 - 8px); transform:translate(-50%,-100%);width:min(420px,100%);text-align:center} /* ② 3時 */ .v3_b1-s2 .v3_b1-ico{left:calc(50% + var(--v3_b1-ox) + var(--v3_b1-R));top:var(--v3_b1-cy);transform:translate(-50%,-50%)} .v3_b1-s2 .v3_b1-lab{left:calc(50% + var(--v3_b1-ox) + var(--v3_b1-R) + var(--v3_b1-cw)/2 + 12px);right:0; top:var(--v3_b1-cy);transform:translateY(-50%)} /* ③ 6時 */ .v3_b1-s3 .v3_b1-ico{left:calc(50% + var(--v3_b1-ox));top:calc(var(--v3_b1-cy) + var(--v3_b1-R));transform:translate(-50%,-50%)} .v3_b1-s3 .v3_b1-lab{left:calc(50% + var(--v3_b1-ox));top:calc(var(--v3_b1-cy) + var(--v3_b1-R) + var(--v3_b1-ch)/2 + 8px); transform:translateX(-50%);width:min(256px,100%);text-align:center} /* ④ 9時 */ .v3_b1-s4 .v3_b1-ico{left:calc(50% + var(--v3_b1-ox) - var(--v3_b1-R));top:var(--v3_b1-cy);transform:translate(-50%,-50%)} .v3_b1-s4 .v3_b1-lab{right:calc(50% - var(--v3_b1-ox) + var(--v3_b1-R) + var(--v3_b1-cw)/2 + 12px);left:0; top:var(--v3_b1-cy);transform:translateY(-50%);text-align:right} /* ── 中心＝自社DB × AI ─────────────────────────────────────────── */ .v3_b1-hub{position:absolute;left:calc(50% + var(--v3_b1-ox));top:var(--v3_b1-cy);transform:translate(-50%,-50%); width:var(--v3_b1-hub);height:var(--v3_b1-hub);border-radius:50%; background:#ffffff;border:2px solid #F0AFC0; display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center} .v3_b1-hart{display:block;width:64px;height:17.3px;margin:0 0 7px} .v3_b1-hart > svg{display:block;width:100%;height:100%} .v3_b1-hubt{margin:0;font-size:14px;font-weight:700;line-height:1.4} .v3_b1-vers{margin:5px 0 0;font-size:12px;line-height:1.4;font-weight:700;color:#B01D36; font-family:'Inter','Helvetica Neue',Arial,sans-serif;white-space:nowrap} .v3_b1-v{display:inline-block} .v3_b1-vx{display:inline-block;margin:0 3px;color:#65686d} .v3_b1-hubn{margin:4px 0 0;font-size:11px;line-height:1.45;color:#3a3c40;white-space:nowrap} /* ── 刈り取りの枝（円の外へ） ───────────────────────────────────── */ .v3_b1-stem{position:absolute;left:calc(50% + var(--v3_b1-ox) - var(--v3_b1-R));margin-left:-1px; top:calc(var(--v3_b1-cy) + var(--v3_b1-ch)/2 + 6px);bottom:8px;width:2px; background-image:linear-gradient(#E11D48 55%,rgba(225,29,72,0) 55%);background-size:2px 13px} .v3_b1-stem::after{content:"";position:absolute;left:50%;bottom:-2px;width:11px;height:10px; transform:translateX(-50%);background:#E11D48;clip-path:polygon(0 0,100% 0,50% 100%)} .v3_b1-sdot{position:absolute;left:50%;top:0;width:9px;height:9px;margin:-4.5px 0 0 -4.5px; border-radius:50%;background:#FE2C55;opacity:0} .v3_b1-stemlab{position:absolute;right:calc(50% - var(--v3_b1-ox) + var(--v3_b1-R) + 14px);left:0; top:calc(var(--v3_b1-cy) + 104px);margin:0;text-align:right; font-size:11.5px;line-height:1.65;color:#3a3c40} .v3_b1-stemk{display:block;width:-webkit-fit-content;width:fit-content;margin:0 0 4px auto; padding:1px 7px;border-radius:5px; background:#E11D48;color:#ffffff;font-size:11px;font-weight:700;line-height:1.6;font-style:normal} /* SP専用の接続線（PCでは非表示） */ .v3_b1-ar{display:none} /* ── 刈り取りバンド ────────────────────────────────────────────── */ .v3_b1-band{display:grid;grid-template-columns:1fr 46px 1fr 46px 1fr; background:#FDEBEF;border:1px solid #F0AFC0;border-radius:16px;padding:14px} .v3_b1-card{min-width:0;display:flex;flex-direction:column;align-items:center;text-align:center; background:#ffffff;border:1px solid #F5C6D1;border-radius:12px;padding:12px} .v3_b1-cart{display:block;width:96px;height:76px;padding:5px;margin:0 0 8px; background:#FDEBEF;border-radius:10px} .v3_b1-cart > svg{display:block;width:100%;height:100%} .v3_b1-cbody{min-width:0} .v3_b1-ct{margin:0;font-size:14.5px;font-weight:700;line-height:1.5} .v3_b1-cs{margin:4px 0 0;font-size:11.5px;line-height:1.65;color:#3a3c40} .v3_b1-c3{border:2px solid #E11D48;padding:11px} .v3_b1-c3 .v3_b1-ct{color:#B01D36;font-size:15.5px} .v3_b1-bar{position:relative;align-self:center;justify-self:center;width:30px;height:2px;background:#E11D48} .v3_b1-bar::after{content:"";position:absolute;right:-2px;top:50%;width:9px;height:10px; transform:translateY(-50%);background:#E11D48;clip-path:polygon(0 0,100% 50%,0 100%)} .v3_b1-bdot,.v3_b1-adot{position:absolute;left:0;top:50%;width:9px;height:9px; margin:-4.5px 0 0 -4.5px;border-radius:50%;background:#FE2C55;opacity:0} .v3_b1-cap{margin:13px 0 0;font-size:12.5px;line-height:1.85;color:#3a3c40} /* ── 中間幅（740〜899px） ─────────────────────────────────────── */ @media (max-width:899px){ .v3_b1-wrap{--v3_b1-R:134px;--v3_b1-iw:84px;--v3_b1-ih:66.5px;--v3_b1-ip:5px;--v3_b1-cw:98px;--v3_b1-ch:80.5px; --v3_b1-cy:244px;--v3_b1-hub:158px;--v3_b1-stageh:492px;--v3_b1-ox:-22px} .v3_b1-ico{border-radius:13px} .v3_b1-num{width:23px;height:23px;left:-8px;top:-8px;font-size:11.5px} .v3_b1-lt{font-size:13px} .v3_b1-s1 .v3_b1-lab{width:min(400px,100%)} .v3_b1-s3 .v3_b1-lab{width:min(220px,100%)} .v3_b1-hidemd{display:none} .v3_b1-hart{width:54px;height:14.6px;margin:0 0 5px} .v3_b1-hubt{font-size:12.5px} .v3_b1-vers{font-size:11.5px;margin:4px 0 0} .v3_b1-hubn{display:none} .v3_b1-stemlab{top:calc(var(--v3_b1-cy) + 92px)} .v3_b1-band{grid-template-columns:1fr 34px 1fr 34px 1fr;padding:12px} .v3_b1-card{padding:11px 9px} .v3_b1-cart{width:88px;height:70px;margin:0 0 7px} .v3_b1-ct{font-size:13.5px} .v3_b1-c3 .v3_b1-ct{font-size:14px} .v3_b1-bar{width:22px} } /* ── SP（〜739px）：円環を「2×2の閉ループ」に組み替える ────────────── */ @media (max-width:739px){ .v3_b1-stage{height:auto} .v3_b1-wrap{--v3_b1-ox:0px} .v3_b1-ring{display:none} .v3_b1-hidesp{display:none} .v3_b1-loop{display:grid;grid-template-columns:10px 1fr 20px 1fr 10px; grid-template-rows:auto auto auto auto auto;align-items:start} .v3_b1-step{display:contents} /* 詳細度を .v3_b1-sN .v3_b1-xxx（0,2,0）と揃えて確実に打ち消す */ .v3_b1-step .v3_b1-ico{position:relative;left:auto;right:auto;top:auto;transform:none; width:100%;max-width:68px;height:auto;aspect-ratio:68/57; justify-self:start;padding:4px;border-radius:11px} .v3_b1-step .v3_b1-lab{position:static;left:auto;right:auto;top:auto;transform:none; width:auto;max-width:none;margin:7px 0 0;text-align:left} .v3_b1-num{left:-7px;top:-7px;width:22px;height:22px;font-size:11px} .v3_b1-lt{font-size:12px;line-height:1.5} .v3_b1-ls{font-size:11px;line-height:1.55;margin:3px 0 0} .v3_b1-sup{font-size:11px} .v3_b1-s1 .v3_b1-ico{grid-area:1/2/2/3} .v3_b1-s1 .v3_b1-lab{grid-area:2/2/3/3} .v3_b1-s2 .v3_b1-ico{grid-area:1/4/2/5} .v3_b1-s2 .v3_b1-lab{grid-area:2/4/3/5} .v3_b1-s4 .v3_b1-ico{grid-area:4/2/5/3} .v3_b1-s4 .v3_b1-lab{grid-area:5/2/6/3} .v3_b1-s3 .v3_b1-ico{grid-area:4/4/5/5} .v3_b1-s3 .v3_b1-lab{grid-area:5/4/6/5} .v3_b1-hub{grid-area:3/2/4/5;position:static;transform:none;width:auto;height:auto; border-radius:13px;margin:14px 0;padding:11px 12px} .v3_b1-hart{margin:0 0 6px} .v3_b1-hubt{font-size:13px} .v3_b1-hubn{display:block;font-size:11px;margin:4px 0 0} /* SPの接続線 */ .v3_b1-ar{display:block;position:relative} .v3_b1-ar1,.v3_b1-ar3{align-self:center;justify-self:stretch;width:auto;height:2px; background:#F5C6D1} .v3_b1-ar1{grid-area:1/2/2/4;margin-left:74px} .v3_b1-ar3{grid-area:4/2/5/4;margin-left:74px} .v3_b1-ar1::after{content:"";position:absolute;right:-2px;top:50%;width:9px;height:10px; transform:translateY(-50%);background:#F0AFC0;clip-path:polygon(0 0,100% 50%,0 100%)} .v3_b1-ar3::after{content:"";position:absolute;left:-2px;top:50%;width:9px;height:10px; transform:translateY(-50%);background:#F0AFC0;clip-path:polygon(100% 0,0 50%,100% 100%)} .v3_b1-ar2,.v3_b1-ar4{justify-self:center;align-self:stretch;width:2px;background:#F5C6D1; margin:20px 0} .v3_b1-ar2{grid-area:1/5/6/6} .v3_b1-ar4{grid-area:1/1/6/2} .v3_b1-ar2::after{content:"";position:absolute;left:50%;bottom:-2px;width:10px;height:9px; transform:translateX(-50%);background:#F0AFC0;clip-path:polygon(0 0,100% 0,50% 100%)} .v3_b1-ar4::after{content:"";position:absolute;left:50%;top:-2px;width:10px;height:9px; transform:translateX(-50%);background:#F0AFC0;clip-path:polygon(0 100%,100% 100%,50% 0)} .v3_b1-ar2 .v3_b1-adot,.v3_b1-ar4 .v3_b1-adot{left:50%;top:0} .v3_b1-stemlab{position:static;text-align:left;margin:16px 0 0;font-size:11.5px} .v3_b1-stemk{margin:0 0 4px 0} .v3_b1-stem{display:block;position:relative;left:auto;top:auto;bottom:auto; margin:6px 0 0 34px;width:2px;height:30px} .v3_b1-band{grid-template-columns:1fr;padding:12px} .v3_b1-card{flex-direction:row;align-items:center;text-align:left;gap:11px;padding:10px 11px} .v3_b1-cbody{flex:1 1 auto} .v3_b1-c3{padding:9px 10px} .v3_b1-cart{flex:none;width:84px;height:67px;margin:0} .v3_b1-ct{font-size:13.5px} .v3_b1-c3 .v3_b1-ct{font-size:14px} .v3_b1-cs{font-size:11px} .v3_b1-bar{width:2px;height:24px;justify-self:start;margin-left:44px;background:#E11D48} .v3_b1-bar::after{right:auto;left:50%;top:auto;bottom:-2px;width:10px;height:9px; transform:translateX(-50%);clip-path:polygon(0 0,100% 0,50% 100%)} .v3_b1-bdot{left:50%;top:0} .v3_b1-cap{font-size:12px;line-height:1.8} } /* ── SPのうち広めの端末：イラストを大きくして余白を活かす ────────────── */ @media (min-width:360px) and (max-width:739px){ .v3_b1-step .v3_b1-ico{max-width:84px} .v3_b1-ar1,.v3_b1-ar3{margin-left:90px} } @media (min-width:560px) and (max-width:739px){ .v3_b1-step .v3_b1-ico{max-width:104px} .v3_b1-ar1,.v3_b1-ar3{margin-left:110px} .v3_b1-lt{font-size:13px} .v3_b1-card{gap:13px} .v3_b1-cart{width:96px;height:76px} } /* ── 動き（.in で起動。点が線を流れる／到達点で小さくポップ の2種のみ） ── */ @keyframes v3_b1ring{ from{stroke-dashoffset:0;opacity:1} to{stroke-dashoffset:-1000;opacity:1} } @keyframes v3_b1dotx{ 0%{left:0;opacity:1} 11%{left:100%;opacity:1} 13%,100%{left:100%;opacity:0} } @keyframes v3_b1dotxr{ 0%{left:100%;opacity:1} 11%{left:0;opacity:1} 13%,100%{left:0;opacity:0} } @keyframes v3_b1doty{ 0%{top:0;opacity:1} 11%{top:100%;opacity:1} 13%,100%{top:100%;opacity:0} } @keyframes v3_b1dotyr{ 0%{top:100%;opacity:1} 11%{top:0;opacity:1} 13%,100%{top:0;opacity:0} } @keyframes v3_b1stem{ 0%{top:0;opacity:0} 2%{top:0;opacity:1} 16%{top:100%;opacity:1} 18%,100%{top:100%;opacity:0} } @keyframes v3_b1pop{ 0%{transform:scale(1)} 1.6%{transform:scale(1.055)} 4.2%{transform:scale(1)} 100%{transform:scale(1)} } .v3_b1-rd,.v3_b1-rh{--v3_b1-a:v3_b1ring 3s linear infinite;opacity:0} .v3_b1-sdot{--v3_b1-a:v3_b1stem 9s linear 1.1s infinite} .v3_b1-c1{--v3_b1-a:v3_b1pop 9s ease-out 2.6s infinite} .v3_b1-c2{--v3_b1-a:v3_b1pop 9s ease-out 3.7s infinite} .v3_b1-c3{--v3_b1-a:v3_b1pop 9s ease-out 5.0s infinite} .v3_b1-b1 .v3_b1-bdot{--v3_b1-a:v3_b1dotx 9s linear 2.8s infinite} .v3_b1-b2 .v3_b1-bdot{--v3_b1-a:v3_b1dotx 9s linear 4.1s infinite} .v3_b1-v1{--v3_b1-a:v3_b1pop 9s ease-out .2s infinite} .v3_b1-v2{--v3_b1-a:v3_b1pop 9s ease-out 3.2s infinite} .v3_b1-v3{--v3_b1-a:v3_b1pop 9s ease-out 6.2s infinite} .v3_b1-ar1 .v3_b1-adot{--v3_b1-a:v3_b1dotx 26s linear 0s infinite} .v3_b1-ar2 .v3_b1-adot{--v3_b1-a:v3_b1doty 9s linear 1.1s infinite} .v3_b1-ar3 .v3_b1-adot{--v3_b1-a:v3_b1dotxr 9s linear 2.2s infinite} .v3_b1-ar4 .v3_b1-adot{--v3_b1-a:v3_b1dotyr 9s linear 3.3s infinite} @media (max-width:739px){ .v3_b1-b1 .v3_b1-bdot{--v3_b1-a:v3_b1doty 9s linear 2.8s infinite} .v3_b1-b2 .v3_b1-bdot{--v3_b1-a:v3_b1doty 9s linear 4.1s infinite} .v3_b1-sdot{--v3_b1-a:v3_b1doty 9s linear 1.1s infinite} } .v3_b1-wrap.in .v3_b1-mo,.in .v3_b1-wrap .v3_b1-mo{animation:var(--v3_b1-a)} @media (prefers-reduced-motion:reduce){ .v3_b1-wrap .v3_b1-mo,.v3_b1-wrap.in .v3_b1-mo,.in .v3_b1-wrap .v3_b1-mo{animation:none!important} } /* ── choose：02 REASONS と同等以上へ引き上げ（2026-09-03） */ /* =================================================================== 07 運用支援の選び方：カード内イラスト（追加のみ・接頭辞 v4_choose-） style.css の末尾にそのまま貼る。既存ルールの書き換えは不要。 =================================================================== */ /* ---- レイアウト ---- 〜379px：図を上に積む（設問がカタカナ語で min-content が広く、横並びだと カード自体がビューポートを超えるため。実測で確認） 380px〜：図（左）＋ CHECK番号/設問（右）の横並び */ .v4_choose-hd{margin:0 0 10px} .v4_choose-t{min-width:0} .v4_choose-t .chno{margin:0 0 8px} .v4_choose-t .chq2{margin:0} .v4_choose-wrap{width:118px;margin:0 0 10px} .v4_choose-wrap svg{display:block;width:100%;height:auto} @media(min-width:380px){ .v4_choose-hd{display:flex;align-items:flex-start;gap:12px} .v4_choose-t{flex:1 1 auto} .v4_choose-wrap{flex:0 0 96px;width:96px;margin:1px 0 0} } @media(min-width:420px){.v4_choose-wrap{flex:0 0 104px;width:104px}} @media(min-width:768px){ .v4_choose-hd{gap:14px} .v4_choose-wrap{flex:0 0 110px;width:110px} } @media(min-width:900px){.v4_choose-wrap{flex:0 0 120px;width:120px}} /* ---- @keyframes ---- */ @keyframes v4c_pop{from{opacity:0;transform:scale(.32)}to{opacity:1;transform:scale(1)}} @keyframes v4c_bob{0%,100%{transform:translateY(0)}50%{transform:translateY(-2.4px)}} @keyframes v4c_dash{to{stroke-dashoffset:-16}} @keyframes v4c_out{to{opacity:0}} @keyframes v4c_runq{0%{offset-distance:0%;opacity:0}4%{opacity:1}24%{offset-distance:100%;opacity:1}30%,100%{offset-distance:100%;opacity:0}} @keyframes v4c_cur{0%{offset-distance:0%;opacity:0}8%{opacity:1}55%,100%{offset-distance:100%;opacity:1}} @keyframes v4c_grow{from{transform:scaleY(0)}to{transform:scaleY(1)}} @keyframes v4c_wide{from{transform:scaleX(0)}to{transform:scaleX(1)}} @keyframes v4c_draw{to{stroke-dashoffset:0}} @keyframes v4c_ring{0%,56%{opacity:0;transform:scale(.35)}63%{opacity:1;transform:scale(.92)}72%{opacity:.8;transform:scale(1.3)}84%,100%{opacity:0;transform:scale(1.75)}} @keyframes v4c_barx{0%,12%{transform:scaleY(1)}20%{transform:scaleY(1.14)}30%,100%{transform:scaleY(1)}} @keyframes v4c_beat{0%,20%,100%{transform:scale(1)}27%{transform:scale(1.09)}} @keyframes v4c_pub{0%,60%,100%{transform:scale(1);opacity:1}72%{transform:scale(1.12);opacity:.86}} @keyframes v4c_xm{0%,100%{opacity:1}50%{opacity:.38}} @keyframes v4c_same{0%,100%{transform:translate(0,0)}46%,54%{transform:translate(1.8px,-1.8px)}} /* ---- 共通の初期状態 ---- */ .v4_choose-wrap .v4_choose-p,.v4_choose-wrap .v4_choose-ck{ transform-box:fill-box;transform-origin:center;opacity:0;transform:scale(.32)} .v4_choose-wrap .v4_choose-bb,.v4_choose-wrap .v4_choose-hub, .v4_choose-wrap .v4_choose-stk,.v4_choose-wrap .v4_choose-pub{transform-box:fill-box;transform-origin:center} .v4_choose-wrap .v4_choose-bar{transform-box:fill-box;transform-origin:50% 100%;transform:scaleY(0)} .v4_choose-wrap .v4_choose-ln{transform-box:fill-box;transform-origin:0 50%;transform:scaleX(0)} .v4_choose-wrap .v4_choose-dw{stroke-dasharray:100;stroke-dashoffset:100} .v4_choose-wrap .v4_choose-clk{transform-box:fill-box;transform-origin:center;opacity:0} .v4_choose-wrap .v4_choose-tk,.v4_choose-wrap .v4_choose-ar, .v4_choose-wrap .v4_choose-d0,.v4_choose-wrap .v4_choose-d1, .v4_choose-wrap .v4_choose-d2,.v4_choose-wrap .v4_choose-d3, .v4_choose-wrap .v4_choose-fl1,.v4_choose-wrap .v4_choose-fl2, .v4_choose-wrap .v4_choose-cur{opacity:0;offset-rotate:0deg} /* ---- 経路（offset-path） ---- */ .v4_choose-wrap .v4_choose-tk{offset-path:path("M41 19 C41 34 47 52 57 62")} .v4_choose-wrap .v4_choose-cur{offset-path:path("M12 40 C22 38 34 32 49 24")} .v4_choose-wrap .v4_choose-fl1{offset-path:path("M57 66 C49 62 41 58 35 52")} .v4_choose-wrap .v4_choose-fl2{offset-path:path("M75 68 C83 64 89 60 92 56")} .v4_choose-wrap .v4_choose-ar{offset-path:path("M52 42 L68 42")} .v4_choose-wrap .v4_choose-d0{offset-path:path("M31 45 L46 45")} .v4_choose-wrap .v4_choose-d1{offset-path:path("M86 40 C96 34 100 22 100 15")} .v4_choose-wrap .v4_choose-d2{offset-path:path("M86 45 L108 45")} .v4_choose-wrap .v4_choose-d3{offset-path:path("M86 50 C96 56 100 68 100 73")} /* ---- 出現フック（2通り必ず書く） ---- */ /* 人・道具・書類が「入る」 */ .v4_choose-wrap.in .v4_choose-p,.in .v4_choose-wrap .v4_choose-p{ animation:v4c_pop .5s cubic-bezier(.34,1.56,.64,1) var(--d,0s) forwards} /* チェックが描かれる＝確認できた */ .v4_choose-wrap.in .v4_choose-ck,.in .v4_choose-wrap .v4_choose-ck{ animation:v4c_pop .48s cubic-bezier(.34,1.56,.64,1) var(--d,0s) forwards} /* 呼吸 */ .v4_choose-wrap.in .v4_choose-bb,.in .v4_choose-wrap .v4_choose-bb{ animation:v4c_bob 3.8s ease-in-out var(--bd,0s) infinite} /* 空き枠が回り、4人目が入ると消える */ .v4_choose-wrap.in .v4_choose-slot,.in .v4_choose-wrap .v4_choose-slot{ animation:v4c_dash 2.4s linear infinite,v4c_out .35s ease-out 1s forwards} /* 依頼トークンが囲いの中を流れる＝すぐ動かせる */ .v4_choose-wrap.in .v4_choose-tk,.in .v4_choose-wrap .v4_choose-tk{ animation:v4c_runq 3.4s cubic-bezier(.45,.05,.55,.95) 1.8s infinite} /* 外注側の切れた線 */ .v4_choose-wrap.in .v4_choose-xm,.in .v4_choose-wrap .v4_choose-xm{ animation:v4c_xm 2.8s ease-in-out infinite} /* 管理画面の棒が伸びる＋最後の棒が跳ねる */ .v4_choose-wrap.in .v4_choose-bar,.in .v4_choose-wrap .v4_choose-bar{ animation:v4c_grow .46s cubic-bezier(.34,1.56,.64,1) var(--d,0s) both} .v4_choose-wrap.in .v4_choose-barx,.in .v4_choose-wrap .v4_choose-barx{ animation:v4c_grow .46s cubic-bezier(.34,1.56,.64,1) var(--d,0s) both, v4c_barx 4.2s ease-in-out 2.6s infinite} /* カーソルが管理画面を動いてクリックする */ .v4_choose-wrap.in .v4_choose-cur,.in .v4_choose-wrap .v4_choose-cur{ animation:v4c_cur 4.2s cubic-bezier(.5,.05,.4,1) .6s infinite} .v4_choose-wrap.in .v4_choose-clk,.in .v4_choose-wrap .v4_choose-clk{ animation:v4c_ring 4.2s ease-out .6s infinite} /* 投稿ボタンが押される */ .v4_choose-wrap.in .v4_choose-pub,.in .v4_choose-wrap .v4_choose-pub{ animation:v4c_pub 4.2s ease-in-out .9s infinite} /* 担当者から2つの道具へ、交互に手が伸びる */ .v4_choose-wrap.in .v4_choose-fl1,.in .v4_choose-wrap .v4_choose-fl1{ animation:v4c_runq 4.2s cubic-bezier(.45,.05,.55,.95) .8s infinite} .v4_choose-wrap.in .v4_choose-fl2,.in .v4_choose-wrap .v4_choose-fl2{ animation:v4c_runq 4.2s cubic-bezier(.45,.05,.55,.95) 2.9s infinite} /* 同じ紙が3枚まとめて動く＝使い回し */ .v4_choose-wrap.in .v4_choose-stk,.in .v4_choose-wrap .v4_choose-stk{ animation:v4c_same 3.6s ease-in-out infinite} /* テンプレ→オーダーメイドへ渡る */ .v4_choose-wrap.in .v4_choose-ar,.in .v4_choose-wrap .v4_choose-ar{ animation:v4c_runq 3.6s cubic-bezier(.45,.05,.55,.95) .3s infinite} /* 商材に合わせて本文が引かれ、実績線が描かれる */ .v4_choose-wrap.in .v4_choose-ln,.in .v4_choose-wrap .v4_choose-ln{ animation:v4c_wide .42s cubic-bezier(.22,1,.36,1) var(--d,0s) forwards} .v4_choose-wrap.in .v4_choose-dw,.in .v4_choose-wrap .v4_choose-dw{ animation:v4c_draw .95s cubic-bezier(.45,.05,.35,1) 1.35s forwards} /* 窓口に依頼が届き、そこから3人へ流れる */ .v4_choose-wrap.in .v4_choose-d0,.in .v4_choose-wrap .v4_choose-d0{ animation:v4c_runq 4.6s cubic-bezier(.45,.05,.55,.95) .25s infinite} .v4_choose-wrap.in .v4_choose-hub,.in .v4_choose-wrap .v4_choose-hub{ animation:v4c_beat 4.6s cubic-bezier(.34,1.56,.64,1) .25s infinite} .v4_choose-wrap.in .v4_choose-d1,.in .v4_choose-wrap .v4_choose-d1{ animation:v4c_runq 4.6s cubic-bezier(.45,.05,.55,.95) 1.35s infinite} .v4_choose-wrap.in .v4_choose-d2,.in .v4_choose-wrap .v4_choose-d2{ animation:v4c_runq 4.6s cubic-bezier(.45,.05,.55,.95) 1.7s infinite} .v4_choose-wrap.in .v4_choose-d3,.in .v4_choose-wrap .v4_choose-d3{ animation:v4c_runq 4.6s cubic-bezier(.45,.05,.55,.95) 2.05s infinite} .v4_choose-wrap.in .v4_choose-lnk,.in .v4_choose-wrap .v4_choose-lnk{ animation:v4c_dash 2.2s linear infinite} /* ---- 動きを減らす設定 ---- */ @media (prefers-reduced-motion: reduce){ .v4_choose-wrap svg *{animation:none!important} .v4_choose-wrap .v4_choose-p,.v4_choose-wrap .v4_choose-ck{opacity:1!important;transform:scale(1)!important} .v4_choose-wrap .v4_choose-bar{transform:scaleY(1)!important} .v4_choose-wrap .v4_choose-ln{transform:scaleX(1)!important} .v4_choose-wrap .v4_choose-dw{stroke-dashoffset:0!important} .v4_choose-wrap .v4_choose-slot{opacity:0!important} .v4_choose-wrap .v4_choose-tk,.v4_choose-wrap .v4_choose-ar, .v4_choose-wrap .v4_choose-d0,.v4_choose-wrap .v4_choose-d1, .v4_choose-wrap .v4_choose-d2,.v4_choose-wrap .v4_choose-d3, .v4_choose-wrap .v4_choose-fl1,.v4_choose-wrap .v4_choose-fl2, .v4_choose-wrap .v4_choose-clk{opacity:0!important} .v4_choose-wrap .v4_choose-cur{opacity:1!important;offset-distance:100%} } /* ── worries：02 REASONS と同等以上へ引き上げ（2026-09-03） */ /* ========================================================================== v4 worries — 01 / PROBLEM「このようなお悩みはございませんか」 本体 assets/css/style.css の末尾にそのまま貼り足すだけで効きます。 既存ルールは1つも書き換えません（追加クラスは全て v4_worries- 接頭辞）。 ========================================================================== */ /* --- 図の大きさ：64px → 96/104/112px --- */ .worry.v4_worries-wrap{--v4w-a:96px;gap:14px;padding:16px} @media(min-width:480px){.worry.v4_worries-wrap{--v4w-a:104px;padding:18px}} @media(min-width:768px){.worry.v4_worries-wrap{--v4w-a:112px;gap:18px;padding:20px 22px}} .wart.v4_worries-art{position:relative;flex:0 0 var(--v4w-a); width:var(--v4w-a);height:var(--v4w-a);border-radius:0;background:transparent} .worry.wide .wart.v4_worries-art{background:transparent} .wart.v4_worries-art>svg{width:100%;height:auto;display:block;overflow:visible} /* --- 図の中の数字・記号は HTML（SVGのは使わない） --- */ .v4_worries-chip{position:absolute;transform:translate(-50%,-50%); width:21px;height:21px;border-radius:999px; background:#ffffff;border:1.6px solid #111215; display:flex;align-items:center;justify-content:center; font-family:var(--f-sans);font-size:12px;font-weight:800;line-height:1; color:#E11D48;box-shadow:0 2px 6px rgba(17,18,21,.16)} .v4_worries-chip--w1{left:19.8%;top:20.8%} .v4_worries-chip--w2{left:50%;top:83.3%} .v4_worries-chip--w4{left:20.3%;top:47.9%} .v4_worries-chip--w5{left:50%;top:47.9%} /* 走る点は既定で不可視（reduced-motion時に原点へ出ないように） */ .v4_worries-w3run,.v4_worries-w4run,.v4_worries-w5ra,.v4_worries-w5rb{opacity:0} /* ========================================================================== モーション：どれも「いま困っている状態」をそのまま写す 出現フックは2通り（li自身に .in が付く場合／祖先の ul に付く場合） ========================================================================== */ @media(prefers-reduced-motion:no-preference){ /* ---- 共通キーフレーム ---- */ @keyframes v4_worries-grow{from{transform:scaleY(.18)}to{transform:scaleY(1)}} @keyframes v4_worries-draw{to{stroke-dashoffset:0}} @keyframes v4_worries-chipin{0%{opacity:0;transform:translate(-50%,-50%) scale(.3)} 100%{opacity:1;transform:translate(-50%,-50%) scale(1)}} @keyframes v4_worries-dotin{0%{opacity:0;transform:scale(.3)}100%{opacity:1;transform:scale(1)}} .v4_worries-chip{opacity:0} .v4_worries-wrap.in .v4_worries-chip,.in .v4_worries-wrap .v4_worries-chip{ animation:v4_worries-chipin .5s cubic-bezier(.34,1.56,.64,1) 1.25s forwards} /* ------------------------------------------------------------------ 01 ショップは開けたのに数字が伸びない ＝ 棒は少しだけ伸びて止まり、点線の目標ラインには届かない。 折れ線は上がりかけて頭打ちになり、先端がゆっくり沈む。 ------------------------------------------------------------------ */ .v4_worries-w1b1,.v4_worries-w1b2,.v4_worries-w1b3{ transform-box:fill-box;transform-origin:bottom;transform:scaleY(.18)} .v4_worries-wrap.in .v4_worries-w1b1,.in .v4_worries-wrap .v4_worries-w1b1{ animation:v4_worries-grow .8s cubic-bezier(.22,1,.36,1) .15s forwards} .v4_worries-wrap.in .v4_worries-w1b2,.in .v4_worries-wrap .v4_worries-w1b2{ animation:v4_worries-grow .8s cubic-bezier(.22,1,.36,1) .3s forwards} .v4_worries-wrap.in .v4_worries-w1b3,.in .v4_worries-wrap .v4_worries-w1b3{ animation:v4_worries-grow .8s cubic-bezier(.22,1,.36,1) .45s forwards} .v4_worries-w1line{stroke-dasharray:44;stroke-dashoffset:44} .v4_worries-wrap.in .v4_worries-w1line,.in .v4_worries-wrap .v4_worries-w1line{ animation:v4_worries-draw 1s ease-out .6s forwards} .v4_worries-w1dot{opacity:0;transform-box:fill-box;transform-origin:center} @keyframes v4_worries-w1sag{0%,100%{transform:translateY(0)}55%{transform:translateY(2.4px)}} .v4_worries-wrap.in .v4_worries-w1dot,.in .v4_worries-wrap .v4_worries-w1dot{ animation:v4_worries-dotin .45s cubic-bezier(.34,1.56,.64,1) 1.5s forwards, v4_worries-w1sag 4.4s ease-in-out 2s infinite} /* 目標ラインは先で待ったまま（届いていないことを静かに示す） */ @keyframes v4_worries-w1goal{to{stroke-dashoffset:-20}} .v4_worries-wrap.in .v4_worries-w1goal,.in .v4_worries-wrap .v4_worries-w1goal{ animation:v4_worries-w1goal 3.4s linear infinite} /* ------------------------------------------------------------------ 02 勝ちパターンが分からない ＝ 選択枠が3本の動画を行ったり来たりして、どれにも決まらない。 ------------------------------------------------------------------ */ @keyframes v4_worries-w2scan{ 0%,12%{transform:translateX(0)} 22%,34%{transform:translateX(32px)} 44%,56%{transform:translateX(64px)} 66%,78%{transform:translateX(32px)} 88%,100%{transform:translateX(0)}} @keyframes v4_worries-w2dash{to{stroke-dashoffset:-26}} .v4_worries-wrap.in .v4_worries-w2scan,.in .v4_worries-wrap .v4_worries-w2scan{ animation:v4_worries-w2scan 7.2s cubic-bezier(.34,1.56,.64,1) infinite, v4_worries-w2dash 1.9s linear infinite} /* ------------------------------------------------------------------ 03 声をかけても返事がこない ＝ 打診は何度も飛んでいくのに途中で消え、相手の吹き出しは「…」のまま。 ------------------------------------------------------------------ */ .v4_worries-w3run{offset-path:path("M39 20 C 48 24, 48 38, 53 46");offset-rotate:0deg} @keyframes v4_worries-w3run{ 0%{offset-distance:0%;opacity:0} 10%{opacity:1} 58%{offset-distance:74%;opacity:1} 78%,100%{offset-distance:92%;opacity:0}} .v4_worries-wrap.in .v4_worries-w3run,.in .v4_worries-wrap .v4_worries-w3run{ animation:v4_worries-w3run 4.2s ease-in-out infinite} @keyframes v4_worries-w3blink{0%,100%{opacity:.3}45%{opacity:1}} .v4_worries-wrap.in .v4_worries-w3d1,.in .v4_worries-wrap .v4_worries-w3d1{ animation:v4_worries-w3blink 1.8s ease-in-out infinite} .v4_worries-wrap.in .v4_worries-w3d2,.in .v4_worries-wrap .v4_worries-w3d2{ animation:v4_worries-w3blink 1.8s ease-in-out .3s infinite} .v4_worries-wrap.in .v4_worries-w3d3,.in .v4_worries-wrap .v4_worries-w3d3{ animation:v4_worries-w3blink 1.8s ease-in-out .6s infinite} .v4_worries-w3b2{transform-box:fill-box;transform-origin:left center;opacity:0;transform:scale(.5)} @keyframes v4_worries-w3b2{to{opacity:1;transform:scale(1)}} .v4_worries-wrap.in .v4_worries-w3b2,.in .v4_worries-wrap .v4_worries-w3b2{ animation:v4_worries-w3b2 .55s cubic-bezier(.34,1.56,.64,1) 1s forwards} /* ------------------------------------------------------------------ 04 ライブは見られるのに注文されない ＝ ハートは上がり続けるのに、カートへ向かった点は途中で消え、カートは0のまま。 ------------------------------------------------------------------ */ .v4_worries-w4h1,.v4_worries-w4h2,.v4_worries-w4h3{ transform-box:fill-box;transform-origin:center;opacity:0} @keyframes v4_worries-w4heart{ 0%{opacity:0;transform:translateY(6px) scale(.6)} 16%{opacity:1;transform:translateY(0) scale(1)} 72%{opacity:.85} 100%{opacity:0;transform:translateY(-26px) scale(.9)}} .v4_worries-wrap.in .v4_worries-w4h1,.in .v4_worries-wrap .v4_worries-w4h1{ animation:v4_worries-w4heart 3.8s ease-out .2s infinite} .v4_worries-wrap.in .v4_worries-w4h2,.in .v4_worries-wrap .v4_worries-w4h2{ animation:v4_worries-w4heart 3.8s ease-out 1.5s infinite} .v4_worries-wrap.in .v4_worries-w4h3,.in .v4_worries-wrap .v4_worries-w4h3{ animation:v4_worries-w4heart 3.8s ease-out 2.6s infinite} .v4_worries-w4run{offset-path:path("M37 46 C 32 44, 30 40, 30.5 36");offset-rotate:0deg} @keyframes v4_worries-w4run{ 0%{offset-distance:0%;opacity:0} 14%{opacity:1} 52%{offset-distance:52%;opacity:.9} 70%,100%{offset-distance:66%;opacity:0}} .v4_worries-wrap.in .v4_worries-w4run,.in .v4_worries-wrap .v4_worries-w4run{ animation:v4_worries-w4run 3.4s ease-in-out infinite} /* ------------------------------------------------------------------ 05 自社商材がマッチするか分からない ＝ 商品から出た点が ○ 側と × 側を交互に往復して、どちらにも決まらない。 ------------------------------------------------------------------ */ .v4_worries-w5ra{offset-path:path("M42 48 C 33 42, 22 34, 19.5 27");offset-rotate:0deg} .v4_worries-w5rb{offset-path:path("M54 48 C 63 42, 74 34, 76.5 27");offset-rotate:0deg} @keyframes v4_worries-w5run{ 0%{offset-distance:0%;opacity:0} 8%{opacity:1} 34%{offset-distance:100%;opacity:1} 44%,100%{offset-distance:100%;opacity:0}} .v4_worries-wrap.in .v4_worries-w5ra,.in .v4_worries-wrap .v4_worries-w5ra{ animation:v4_worries-w5run 5.4s ease-in-out infinite} .v4_worries-wrap.in .v4_worries-w5rb,.in .v4_worries-wrap .v4_worries-w5rb{ animation:v4_worries-w5run 5.4s ease-in-out 2.7s infinite} @keyframes v4_worries-w5dasha{to{stroke-dashoffset:-24}} @keyframes v4_worries-w5dashb{to{stroke-dashoffset:24}} .v4_worries-wrap.in .v4_worries-w5pa,.in .v4_worries-wrap .v4_worries-w5pa{ animation:v4_worries-w5dasha 3.6s linear infinite} .v4_worries-wrap.in .v4_worries-w5pb,.in .v4_worries-wrap .v4_worries-w5pb{ animation:v4_worries-w5dashb 3.6s linear infinite} } /* --- 動きを減らす設定：完成形で静止 --- */ @media(prefers-reduced-motion:reduce){ .v4_worries-art,.v4_worries-art *{animation:none!important;transition:none!important} .v4_worries-chip{opacity:1} } /* ── data_p3：02 REASONS と同等以上へ引き上げ（2026-09-03） */ /* ============================================================ 04 DATA「分析内容」タブ ＝ 走査線が10項目を上から順に点灯させる キー data_p3 / 追加クラスはすべて接頭辞 v4_data_p3- 本体 assets/css/style.css の末尾にこのまま貼れば効く（既存ルールは書き換えない） 色は #ffffff / #25F4EE / #FE2C55 と、その3色由来のrgba()のみ ============================================================ */ /* ---- 枠 ---- */ .ds_a-fbox.v4_data_p3-box{max-width:830px;gap:34px;align-items:center} .ds_a-fl.v4_data_p3-side{min-width:150px;max-width:168px} /* ---- 左：0→10 のカウントアップ（CSSのみ。数字の縦ロールをsteps送り） ---- */ .ds_a-fnum.v4_data_p3-num{display:block;width:-webkit-max-content;width:max-content; overflow:hidden;height:1.16em;line-height:1;font-variant-numeric:tabular-nums} .v4_data_p3-roll{display:block;transform:translateY(-11.6em)} .v4_data_p3-roll i{display:block;height:1.16em;line-height:1.16em;font-style:normal} .v4_data_p3-sr{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap} /* ---- 左：10本のティック（項目が灯るたびに1本ずつ立ち上がる） ---- */ .v4_data_p3-ticks{display:flex;align-items:flex-end;gap:4px;height:17px;margin:11px 0 10px} .v4_data_p3-ticks i{display:block;width:3px;border-radius:1.5px;background:#25F4EE; transform-origin:50% 100%} .v4_data_p3-ticks i:nth-child(1){height:7.0px} .v4_data_p3-ticks i:nth-child(2){height:8.0px} .v4_data_p3-ticks i:nth-child(3){height:9.0px} .v4_data_p3-ticks i:nth-child(4){height:10.0px} .v4_data_p3-ticks i:nth-child(5){height:11.0px} .v4_data_p3-ticks i:nth-child(6){height:12.0px} .v4_data_p3-ticks i:nth-child(7){height:13.0px} .v4_data_p3-ticks i:nth-child(8){height:14.0px} .v4_data_p3-ticks i:nth-child(9){height:15.0px} .v4_data_p3-ticks i:nth-child(10){height:16.0px} /* ---- 右：走査ステージ ---- */ .v4_data_p3-stage{position:relative;overflow:hidden;min-width:0} .v4_data_p3-beam{position:absolute;left:0;right:0;top:106%;height:0;z-index:2; pointer-events:none;opacity:0} .v4_data_p3-beam i{display:block;height:2px;margin-top:-1px;border-radius:2px; background:linear-gradient(90deg,rgba(37,244,238,0),rgba(37,244,238,.9) 20%, rgba(255,255,255,.98) 50%,rgba(37,244,238,.9) 80%,rgba(37,244,238,0)); box-shadow:0 0 11px rgba(37,244,238,.6)} .v4_data_p3-beam::after{content:"";position:absolute;left:0;right:0;bottom:1px;height:30px; background:linear-gradient(180deg,rgba(37,244,238,0),rgba(37,244,238,.15))} /* ---- 右：2列リスト ---- */ .ds_a-flist.v4_data_p3-list{grid-template-columns:1fr 1fr;gap:8px 18px} .ds_a-flist.v4_data_p3-list li{display:grid;grid-template-columns:auto 1fr;align-items:center; gap:11px;padding:8px 7px;border-bottom:1px solid rgba(255,255,255,.1);border-radius:4px; font-size:12.5px;line-height:1.5;font-weight:700;color:#ffffff} .ds_a-flist.v4_data_p3-list li::before{content:none} .ds_a-flist.v4_data_p3-list li::after{content:"";position:absolute;left:7px;right:7px;bottom:-1px; height:1.5px;border-radius:1px;transform:scaleX(1);transform-origin:0 50%; background:linear-gradient(90deg,#25F4EE,rgba(37,244,238,0))} .v4_data_p3-t{display:block;color:#ffffff} .v4_data_p3-c{display:block;line-height:0} .v4_data_p3-fig{width:60px;height:38px;display:block;overflow:visible} /* ---- 図の共通 ---- */ .v4_data_p3-fig rect,.v4_data_p3-fig circle,.v4_data_p3-fig path{transform-box:fill-box} /* 1 競合ショップ・商品の分析：対向バー */ .v4_data_p3-f1L rect{fill:rgba(255,255,255,.14);stroke:rgba(255,255,255,.72);stroke-width:1.3; transform-origin:100% 50%} .v4_data_p3-f1R rect{fill:#FE2C55;transform-origin:0 50%} .v4_data_p3-f1ax{fill:none;stroke:#ffffff;stroke-width:1.5;stroke-linecap:round} /* 2 市場規模と上位集中度：ドーナツ */ .v4_data_p3-f2bg{fill:none;stroke:rgba(255,255,255,.16);stroke-width:7.6} .v4_data_p3-f2top{fill:none;stroke:#FE2C55;stroke-width:7.6;stroke-linecap:butt; stroke-dasharray:100;stroke-dashoffset:0} .v4_data_p3-f2core{fill:#25F4EE;transform-origin:50% 50%} /* 3 カテゴリ伸長率：階段バー＋上昇矢印 */ .v4_data_p3-f3b rect{fill:rgba(37,244,238,.36);stroke:rgba(255,255,255,.8);stroke-width:1.3; transform-origin:50% 100%} .v4_data_p3-f3arr{fill:none;stroke:#FE2C55;stroke-width:2.1;stroke-linecap:round; stroke-linejoin:round;stroke-dasharray:100;stroke-dashoffset:0} .v4_data_p3-f3head{fill:#FE2C55;transform-origin:50% 50%} /* 4 価格帯分布：ヒストグラム */ .v4_data_p3-f4b rect{fill:rgba(255,255,255,.16);stroke:rgba(255,255,255,.62);stroke-width:1.2; transform-origin:50% 100%} .v4_data_p3-f4b rect.v4_data_p3-f4pk{fill:#25F4EE;stroke:rgba(255,255,255,.9)} .v4_data_p3-f4ax{fill:none;stroke:rgba(255,255,255,.4);stroke-width:1.3;stroke-linecap:round} .v4_data_p3-f4mk{fill:#FE2C55;transform-origin:50% 0} /* 5 穴場商品の抽出：散布図＋外れ値 */ .v4_data_p3-f5ax{fill:none;stroke:rgba(255,255,255,.34);stroke-width:1.3;stroke-linecap:round; stroke-linejoin:round} .v4_data_p3-f5d circle{fill:rgba(255,255,255,.6)} .v4_data_p3-f5ring{fill:none;stroke:#25F4EE;stroke-width:1.5;transform-origin:50% 50%} .v4_data_p3-f5gem{fill:#25F4EE;stroke:rgba(255,255,255,.9);stroke-width:1.2; transform-origin:50% 50%} /* 6 伸び始めの検知：平坦→急上昇＋検知線 */ .v4_data_p3-f6flat{fill:none;stroke:rgba(255,255,255,.74);stroke-width:1.8;stroke-linecap:round; stroke-linejoin:round;stroke-dasharray:100;stroke-dashoffset:0} .v4_data_p3-f6rise{fill:none;stroke:#25F4EE;stroke-width:2.2;stroke-linecap:round; stroke-linejoin:round;stroke-dasharray:100;stroke-dashoffset:0} .v4_data_p3-f6v{fill:none;stroke:#FE2C55;stroke-width:1.3;stroke-dasharray:2.4 3} .v4_data_p3-f6dot{fill:#FE2C55;transform-origin:50% 50%} .v4_data_p3-f6halo{fill:none;stroke:#FE2C55;stroke-width:1.4;opacity:0;transform-origin:50% 50%} /* 7 売れ筋動画・LIVEの型分析：縦フレーム3枚＋再生 */ .v4_data_p3-f7sL,.v4_data_p3-f7sR{fill:rgba(255,255,255,.11);stroke:rgba(255,255,255,.58); stroke-width:1.2} .v4_data_p3-f7c{fill:rgba(254,44,85,.32);stroke:#ffffff;stroke-width:1.5;transform-origin:50% 50%} .v4_data_p3-f7play{fill:#ffffff;transform-origin:50% 50%} .v4_data_p3-f7live{fill:#FE2C55;transform-origin:50% 50%} /* 8 販売チャネル構成比：積み上げ横バー */ .v4_data_p3-f8s1{fill:#25F4EE;transform-origin:0 50%} .v4_data_p3-f8s2{fill:#FE2C55;transform-origin:0 50%} .v4_data_p3-f8s3{fill:rgba(255,255,255,.28);transform-origin:0 50%} .v4_data_p3-f8out{fill:none;stroke:rgba(255,255,255,.8);stroke-width:1.4} .v4_data_p3-f8tk{fill:none;stroke:rgba(255,255,255,.45);stroke-width:1.2;stroke-linecap:round} .v4_data_p3-f8car{fill:#25F4EE} /* 9 商品→クリエイター逆引き：商品箱から3人へ分岐 */ .v4_data_p3-f9tr path{fill:none;stroke:rgba(255,255,255,.4);stroke-width:1.3; stroke-dasharray:2.6 3} .v4_data_p3-f9box{fill:rgba(254,44,85,.38);stroke:#ffffff;stroke-width:1.4} .v4_data_p3-f9tape{fill:none;stroke:rgba(255,255,255,.7);stroke-width:1.1} .v4_data_p3-f9n circle{fill:rgba(37,244,238,.16);stroke:rgba(255,255,255,.72);stroke-width:1.3; transform-origin:50% 50%} .v4_data_p3-f9c circle{fill:#25F4EE} .v4_data_p3-f9d1,.v4_data_p3-f9d2,.v4_data_p3-f9d3{fill:#25F4EE;opacity:0} .v4_data_p3-f9d1{offset-path:path("M17 17 C29 17 30 6 41.4 6")} .v4_data_p3-f9d2{offset-path:path("M17 17 H41.4")} .v4_data_p3-f9d3{offset-path:path("M17 17 C29 17 30 28 41.4 28")} /* 10 クリエイターの実績・継続性：連続コマ */ .v4_data_p3-f10c rect{stroke:rgba(255,255,255,.34);stroke-width:1.1;transform-origin:50% 100%} .v4_data_p3-f10c rect:nth-child(1){fill:rgba(37,244,238,.22)} .v4_data_p3-f10c rect:nth-child(2){fill:rgba(37,244,238,.3)} .v4_data_p3-f10c rect:nth-child(3){fill:rgba(37,244,238,.4)} .v4_data_p3-f10c rect:nth-child(4){fill:rgba(37,244,238,.5)} .v4_data_p3-f10c rect:nth-child(5){fill:rgba(37,244,238,.62)} .v4_data_p3-f10c rect:nth-child(6){fill:rgba(37,244,238,.74)} .v4_data_p3-f10c rect:nth-child(7){fill:rgba(37,244,238,.88)} .v4_data_p3-f10c rect:nth-child(8){fill:#25F4EE} .v4_data_p3-f10tr{fill:none;stroke:rgba(255,255,255,.3);stroke-width:1.4;stroke-linecap:round} .v4_data_p3-f10bar{fill:none;stroke:#25F4EE;stroke-width:2.2;stroke-linecap:round; stroke-dasharray:100;stroke-dashoffset:0} .v4_data_p3-f10end{fill:#FE2C55;transform-origin:50% 50%} /* ============ @keyframes ============ */ @keyframes v4dp3-beam{ 0%{top:-6%;opacity:0} 3%{opacity:1} 42%{opacity:1} 47.6%{top:106%;opacity:0} 100%{top:106%;opacity:0}} @keyframes v4dp3-txt{from{opacity:.58;transform:translateX(-5px)} to{opacity:1;transform:none}} @keyframes v4dp3-rule{from{transform:scaleX(0)}to{transform:scaleX(1)}} @keyframes v4dp3-row{0%,3%{background-color:rgba(37,244,238,0)} 7%{background-color:rgba(37,244,238,.12)} 17%,100%{background-color:rgba(37,244,238,0)}} @keyframes v4dp3-tick{from{transform:scaleY(.16);opacity:.22}to{transform:none;opacity:1}} @keyframes v4dp3-count{from{transform:translateY(0)}to{transform:translateY(-11.6em)}} @keyframes v4dp3-gy{from{transform:scaleY(0)}to{transform:none}} @keyframes v4dp3-gxl{from{transform:scaleX(0)}to{transform:none}} @keyframes v4dp3-gxr{from{transform:scaleX(0)}to{transform:none}} @keyframes v4dp3-draw{from{stroke-dashoffset:100}to{stroke-dashoffset:0}} @keyframes v4dp3-pop{0%{transform:scale(.2);opacity:0} 62%{transform:scale(1.2);opacity:1} 100%{transform:scale(1);opacity:1}} @keyframes v4dp3-in{from{opacity:0}to{opacity:1}} @keyframes v4dp3-settle{0%{transform:scale(2.3);opacity:0} 55%{opacity:1} 100%{transform:scale(1);opacity:1}} @keyframes v4dp3-slideL{from{opacity:0;transform:translateX(7px)}to{opacity:1;transform:none}} @keyframes v4dp3-slideR{from{opacity:0;transform:translateX(-7px)}to{opacity:1;transform:none}} /* --- ループ側（0%と100%が静止状態。reduce時に animation:none で成立する） --- */ @keyframes v4dp3-beat{0%,4%{transform:scale(1)} 8%{transform:scale(1.34)} 14%,100%{transform:scale(1)}} @keyframes v4dp3-bob{0%,4%{transform:translateY(0)} 9%{transform:translateY(-2.6px)} 16%,100%{transform:translateY(0)}} @keyframes v4dp3-wide{0%,4%{stroke-width:7.6} 9%{stroke-width:9.4} 16%,100%{stroke-width:7.6}} @keyframes v4dp3-winx{0%,4%{transform:scaleX(1)} 9%{transform:scaleX(1.1)} 17%,100%{transform:scaleX(1)}} @keyframes v4dp3-halo{0%,3%{transform:scale(1);opacity:.9} 13%{transform:scale(1.9);opacity:0} 14%,100%{transform:scale(1);opacity:0}} @keyframes v4dp3-run{0%{offset-distance:0%;opacity:0} 2%{opacity:1} 14%{offset-distance:100%;opacity:1} 17%,100%{offset-distance:100%;opacity:0}} @keyframes v4dp3-caret{0%,6%{transform:translateX(0)} 13%,20%{transform:translateX(18.5px)} 27%,34%{transform:translateX(31.5px)} 42%,100%{transform:translateX(0)}} /* ============ 出現フック（.in の付き方2通りを必ず書く） ============ */ .ds_a-wrap.in #ds_a-t3:checked~.ds_a-panels .v4_data_p3-beam, .in .ds_a-wrap #ds_a-t3:checked~.ds_a-panels .v4_data_p3-beam{animation:v4dp3-beam 6s linear 0.269s infinite} .ds_a-wrap.in #ds_a-t3:checked~.ds_a-panels .v4_data_p3-roll, .in .ds_a-wrap #ds_a-t3:checked~.ds_a-panels .v4_data_p3-roll{animation:v4dp3-count 2.55s steps(10,end) 0.55s both} .ds_a-wrap.in #ds_a-t3:checked~.ds_a-panels .v4_data_p3-list li:nth-child(1) .v4_data_p3-t, .in .ds_a-wrap #ds_a-t3:checked~.ds_a-panels .v4_data_p3-list li:nth-child(1) .v4_data_p3-t{animation:v4dp3-txt .42s cubic-bezier(.22,1,.36,1) 0.55s both} .ds_a-wrap.in #ds_a-t3:checked~.ds_a-panels .v4_data_p3-list li:nth-child(1)::after, .in .ds_a-wrap #ds_a-t3:checked~.ds_a-panels .v4_data_p3-list li:nth-child(1)::after{animation:v4dp3-rule .5s cubic-bezier(.22,1,.36,1) 0.55s both} .ds_a-wrap.in #ds_a-t3:checked~.ds_a-panels .v4_data_p3-list li:nth-child(1), .in .ds_a-wrap #ds_a-t3:checked~.ds_a-panels .v4_data_p3-list li:nth-child(1){animation:v4dp3-row 6s ease-out 0.46s infinite} .ds_a-wrap.in #ds_a-t3:checked~.ds_a-panels .v4_data_p3-ticks i:nth-child(1), .in .ds_a-wrap #ds_a-t3:checked~.ds_a-panels .v4_data_p3-ticks i:nth-child(1){animation:v4dp3-tick .44s cubic-bezier(.34,1.56,.64,1) 0.55s both} .ds_a-wrap.in #ds_a-t3:checked~.ds_a-panels .v4_data_p3-list li:nth-child(2) .v4_data_p3-t, .in .ds_a-wrap #ds_a-t3:checked~.ds_a-panels .v4_data_p3-list li:nth-child(2) .v4_data_p3-t{animation:v4dp3-txt .42s cubic-bezier(.22,1,.36,1) 0.805s both} .ds_a-wrap.in #ds_a-t3:checked~.ds_a-panels .v4_data_p3-list li:nth-child(2)::after, .in .ds_a-wrap #ds_a-t3:checked~.ds_a-panels .v4_data_p3-list li:nth-child(2)::after{animation:v4dp3-rule .5s cubic-bezier(.22,1,.36,1) 0.805s both} .ds_a-wrap.in #ds_a-t3:checked~.ds_a-panels .v4_data_p3-list li:nth-child(2), .in .ds_a-wrap #ds_a-t3:checked~.ds_a-panels .v4_data_p3-list li:nth-child(2){animation:v4dp3-row 6s ease-out 0.715s infinite} .ds_a-wrap.in #ds_a-t3:checked~.ds_a-panels .v4_data_p3-ticks i:nth-child(2), .in .ds_a-wrap #ds_a-t3:checked~.ds_a-panels .v4_data_p3-ticks i:nth-child(2){animation:v4dp3-tick .44s cubic-bezier(.34,1.56,.64,1) 0.805s both} .ds_a-wrap.in #ds_a-t3:checked~.ds_a-panels .v4_data_p3-list li:nth-child(3) .v4_data_p3-t, .in .ds_a-wrap #ds_a-t3:checked~.ds_a-panels .v4_data_p3-list li:nth-child(3) .v4_data_p3-t{animation:v4dp3-txt .42s cubic-bezier(.22,1,.36,1) 1.06s both} .ds_a-wrap.in #ds_a-t3:checked~.ds_a-panels .v4_data_p3-list li:nth-child(3)::after, .in .ds_a-wrap #ds_a-t3:checked~.ds_a-panels .v4_data_p3-list li:nth-child(3)::after{animation:v4dp3-rule .5s cubic-bezier(.22,1,.36,1) 1.06s both} .ds_a-wrap.in #ds_a-t3:checked~.ds_a-panels .v4_data_p3-list li:nth-child(3), .in .ds_a-wrap #ds_a-t3:checked~.ds_a-panels .v4_data_p3-list li:nth-child(3){animation:v4dp3-row 6s ease-out 0.97s infinite} .ds_a-wrap.in #ds_a-t3:checked~.ds_a-panels .v4_data_p3-ticks i:nth-child(3), .in .ds_a-wrap #ds_a-t3:checked~.ds_a-panels .v4_data_p3-ticks i:nth-child(3){animation:v4dp3-tick .44s cubic-bezier(.34,1.56,.64,1) 1.06s both} .ds_a-wrap.in #ds_a-t3:checked~.ds_a-panels .v4_data_p3-list li:nth-child(4) .v4_data_p3-t, .in .ds_a-wrap #ds_a-t3:checked~.ds_a-panels .v4_data_p3-list li:nth-child(4) .v4_data_p3-t{animation:v4dp3-txt .42s cubic-bezier(.22,1,.36,1) 1.315s both} .ds_a-wrap.in #ds_a-t3:checked~.ds_a-panels .v4_data_p3-list li:nth-child(4)::after, .in .ds_a-wrap #ds_a-t3:checked~.ds_a-panels .v4_data_p3-list li:nth-child(4)::after{animation:v4dp3-rule .5s cubic-bezier(.22,1,.36,1) 1.315s both} .ds_a-wrap.in #ds_a-t3:checked~.ds_a-panels .v4_data_p3-list li:nth-child(4), .in .ds_a-wrap #ds_a-t3:checked~.ds_a-panels .v4_data_p3-list li:nth-child(4){animation:v4dp3-row 6s ease-out 1.225s infinite} .ds_a-wrap.in #ds_a-t3:checked~.ds_a-panels .v4_data_p3-ticks i:nth-child(4), .in .ds_a-wrap #ds_a-t3:checked~.ds_a-panels .v4_data_p3-ticks i:nth-child(4){animation:v4dp3-tick .44s cubic-bezier(.34,1.56,.64,1) 1.315s both} .ds_a-wrap.in #ds_a-t3:checked~.ds_a-panels .v4_data_p3-list li:nth-child(5) .v4_data_p3-t, .in .ds_a-wrap #ds_a-t3:checked~.ds_a-panels .v4_data_p3-list li:nth-child(5) .v4_data_p3-t{animation:v4dp3-txt .42s cubic-bezier(.22,1,.36,1) 1.57s both} .ds_a-wrap.in #ds_a-t3:checked~.ds_a-panels .v4_data_p3-list li:nth-child(5)::after, .in .ds_a-wrap #ds_a-t3:checked~.ds_a-panels .v4_data_p3-list li:nth-child(5)::after{animation:v4dp3-rule .5s cubic-bezier(.22,1,.36,1) 1.57s both} .ds_a-wrap.in #ds_a-t3:checked~.ds_a-panels .v4_data_p3-list li:nth-child(5), .in .ds_a-wrap #ds_a-t3:checked~.ds_a-panels .v4_data_p3-list li:nth-child(5){animation:v4dp3-row 6s ease-out 1.48s infinite} .ds_a-wrap.in #ds_a-t3:checked~.ds_a-panels .v4_data_p3-ticks i:nth-child(5), .in .ds_a-wrap #ds_a-t3:checked~.ds_a-panels .v4_data_p3-ticks i:nth-child(5){animation:v4dp3-tick .44s cubic-bezier(.34,1.56,.64,1) 1.57s both} .ds_a-wrap.in #ds_a-t3:checked~.ds_a-panels .v4_data_p3-list li:nth-child(6) .v4_data_p3-t, .in .ds_a-wrap #ds_a-t3:checked~.ds_a-panels .v4_data_p3-list li:nth-child(6) .v4_data_p3-t{animation:v4dp3-txt .42s cubic-bezier(.22,1,.36,1) 1.825s both} .ds_a-wrap.in #ds_a-t3:checked~.ds_a-panels .v4_data_p3-list li:nth-child(6)::after, .in .ds_a-wrap #ds_a-t3:checked~.ds_a-panels .v4_data_p3-list li:nth-child(6)::after{animation:v4dp3-rule .5s cubic-bezier(.22,1,.36,1) 1.825s both} .ds_a-wrap.in #ds_a-t3:checked~.ds_a-panels .v4_data_p3-list li:nth-child(6), .in .ds_a-wrap #ds_a-t3:checked~.ds_a-panels .v4_data_p3-list li:nth-child(6){animation:v4dp3-row 6s ease-out 1.735s infinite} .ds_a-wrap.in #ds_a-t3:checked~.ds_a-panels .v4_data_p3-ticks i:nth-child(6), .in .ds_a-wrap #ds_a-t3:checked~.ds_a-panels .v4_data_p3-ticks i:nth-child(6){animation:v4dp3-tick .44s cubic-bezier(.34,1.56,.64,1) 1.825s both} .ds_a-wrap.in #ds_a-t3:checked~.ds_a-panels .v4_data_p3-list li:nth-child(7) .v4_data_p3-t, .in .ds_a-wrap #ds_a-t3:checked~.ds_a-panels .v4_data_p3-list li:nth-child(7) .v4_data_p3-t{animation:v4dp3-txt .42s cubic-bezier(.22,1,.36,1) 2.08s both} .ds_a-wrap.in #ds_a-t3:checked~.ds_a-panels .v4_data_p3-list li:nth-child(7)::after, .in .ds_a-wrap #ds_a-t3:checked~.ds_a-panels .v4_data_p3-list li:nth-child(7)::after{animation:v4dp3-rule .5s cubic-bezier(.22,1,.36,1) 2.08s both} .ds_a-wrap.in #ds_a-t3:checked~.ds_a-panels .v4_data_p3-list li:nth-child(7), .in .ds_a-wrap #ds_a-t3:checked~.ds_a-panels .v4_data_p3-list li:nth-child(7){animation:v4dp3-row 6s ease-out 1.99s infinite} .ds_a-wrap.in #ds_a-t3:checked~.ds_a-panels .v4_data_p3-ticks i:nth-child(7), .in .ds_a-wrap #ds_a-t3:checked~.ds_a-panels .v4_data_p3-ticks i:nth-child(7){animation:v4dp3-tick .44s cubic-bezier(.34,1.56,.64,1) 2.08s both} .ds_a-wrap.in #ds_a-t3:checked~.ds_a-panels .v4_data_p3-list li:nth-child(8) .v4_data_p3-t, .in .ds_a-wrap #ds_a-t3:checked~.ds_a-panels .v4_data_p3-list li:nth-child(8) .v4_data_p3-t{animation:v4dp3-txt .42s cubic-bezier(.22,1,.36,1) 2.335s both} .ds_a-wrap.in #ds_a-t3:checked~.ds_a-panels .v4_data_p3-list li:nth-child(8)::after, .in .ds_a-wrap #ds_a-t3:checked~.ds_a-panels .v4_data_p3-list li:nth-child(8)::after{animation:v4dp3-rule .5s cubic-bezier(.22,1,.36,1) 2.335s both} .ds_a-wrap.in #ds_a-t3:checked~.ds_a-panels .v4_data_p3-list li:nth-child(8), .in .ds_a-wrap #ds_a-t3:checked~.ds_a-panels .v4_data_p3-list li:nth-child(8){animation:v4dp3-row 6s ease-out 2.245s infinite} .ds_a-wrap.in #ds_a-t3:checked~.ds_a-panels .v4_data_p3-ticks i:nth-child(8), .in .ds_a-wrap #ds_a-t3:checked~.ds_a-panels .v4_data_p3-ticks i:nth-child(8){animation:v4dp3-tick .44s cubic-bezier(.34,1.56,.64,1) 2.335s both} .ds_a-wrap.in #ds_a-t3:checked~.ds_a-panels .v4_data_p3-list li:nth-child(9) .v4_data_p3-t, .in .ds_a-wrap #ds_a-t3:checked~.ds_a-panels .v4_data_p3-list li:nth-child(9) .v4_data_p3-t{animation:v4dp3-txt .42s cubic-bezier(.22,1,.36,1) 2.59s both} .ds_a-wrap.in #ds_a-t3:checked~.ds_a-panels .v4_data_p3-list li:nth-child(9)::after, .in .ds_a-wrap #ds_a-t3:checked~.ds_a-panels .v4_data_p3-list li:nth-child(9)::after{animation:v4dp3-rule .5s cubic-bezier(.22,1,.36,1) 2.59s both} .ds_a-wrap.in #ds_a-t3:checked~.ds_a-panels .v4_data_p3-list li:nth-child(9), .in .ds_a-wrap #ds_a-t3:checked~.ds_a-panels .v4_data_p3-list li:nth-child(9){animation:v4dp3-row 6s ease-out 2.5s infinite} .ds_a-wrap.in #ds_a-t3:checked~.ds_a-panels .v4_data_p3-ticks i:nth-child(9), .in .ds_a-wrap #ds_a-t3:checked~.ds_a-panels .v4_data_p3-ticks i:nth-child(9){animation:v4dp3-tick .44s cubic-bezier(.34,1.56,.64,1) 2.59s both} .ds_a-wrap.in #ds_a-t3:checked~.ds_a-panels .v4_data_p3-list li:nth-child(10) .v4_data_p3-t, .in .ds_a-wrap #ds_a-t3:checked~.ds_a-panels .v4_data_p3-list li:nth-child(10) .v4_data_p3-t{animation:v4dp3-txt .42s cubic-bezier(.22,1,.36,1) 2.845s both} .ds_a-wrap.in #ds_a-t3:checked~.ds_a-panels .v4_data_p3-list li:nth-child(10)::after, .in .ds_a-wrap #ds_a-t3:checked~.ds_a-panels .v4_data_p3-list li:nth-child(10)::after{animation:v4dp3-rule .5s cubic-bezier(.22,1,.36,1) 2.845s both} .ds_a-wrap.in #ds_a-t3:checked~.ds_a-panels .v4_data_p3-list li:nth-child(10), .in .ds_a-wrap #ds_a-t3:checked~.ds_a-panels .v4_data_p3-list li:nth-child(10){animation:v4dp3-row 6s ease-out 2.755s infinite} .ds_a-wrap.in #ds_a-t3:checked~.ds_a-panels .v4_data_p3-ticks i:nth-child(10), .in .ds_a-wrap #ds_a-t3:checked~.ds_a-panels .v4_data_p3-ticks i:nth-child(10){animation:v4dp3-tick .44s cubic-bezier(.34,1.56,.64,1) 2.845s both} /* 図の中身（項目が灯る瞬間に合わせて描かれる） */ .ds_a-wrap.in #ds_a-t3:checked~.ds_a-panels .v4_data_p3-f1ax, .in .ds_a-wrap #ds_a-t3:checked~.ds_a-panels .v4_data_p3-f1ax{animation:v4dp3-in .36s ease-out 0.55s both} .ds_a-wrap.in #ds_a-t3:checked~.ds_a-panels .v4_data_p3-f2bg, .in .ds_a-wrap #ds_a-t3:checked~.ds_a-panels .v4_data_p3-f2bg{animation:v4dp3-in .36s ease-out 0.805s both} .ds_a-wrap.in #ds_a-t3:checked~.ds_a-panels .v4_data_p3-f4ax, .in .ds_a-wrap #ds_a-t3:checked~.ds_a-panels .v4_data_p3-f4ax{animation:v4dp3-in .36s ease-out 1.315s both} .ds_a-wrap.in #ds_a-t3:checked~.ds_a-panels .v4_data_p3-f5ax, .in .ds_a-wrap #ds_a-t3:checked~.ds_a-panels .v4_data_p3-f5ax{animation:v4dp3-in .36s ease-out 1.57s both} .ds_a-wrap.in #ds_a-t3:checked~.ds_a-panels .v4_data_p3-f10tr, .in .ds_a-wrap #ds_a-t3:checked~.ds_a-panels .v4_data_p3-f10tr{animation:v4dp3-in .36s ease-out 2.845s both} .ds_a-wrap.in #ds_a-t3:checked~.ds_a-panels .v4_data_p3-f1L rect:nth-child(1), .in .ds_a-wrap #ds_a-t3:checked~.ds_a-panels .v4_data_p3-f1L rect:nth-child(1){animation:v4dp3-gxr .4s cubic-bezier(.22,1,.36,1) 0.55s both} .ds_a-wrap.in #ds_a-t3:checked~.ds_a-panels .v4_data_p3-f1L rect:nth-child(2), .in .ds_a-wrap #ds_a-t3:checked~.ds_a-panels .v4_data_p3-f1L rect:nth-child(2){animation:v4dp3-gxr .4s cubic-bezier(.22,1,.36,1) 0.6s both} .ds_a-wrap.in #ds_a-t3:checked~.ds_a-panels .v4_data_p3-f1L rect:nth-child(3), .in .ds_a-wrap #ds_a-t3:checked~.ds_a-panels .v4_data_p3-f1L rect:nth-child(3){animation:v4dp3-gxr .4s cubic-bezier(.22,1,.36,1) 0.65s both} .ds_a-wrap.in #ds_a-t3:checked~.ds_a-panels .v4_data_p3-f1R rect:nth-child(1), .in .ds_a-wrap #ds_a-t3:checked~.ds_a-panels .v4_data_p3-f1R rect:nth-child(1){animation:v4dp3-gxl .4s cubic-bezier(.22,1,.36,1) 0.68s both} .ds_a-wrap.in #ds_a-t3:checked~.ds_a-panels .v4_data_p3-f1R rect:nth-child(3), .in .ds_a-wrap #ds_a-t3:checked~.ds_a-panels .v4_data_p3-f1R rect:nth-child(3){animation:v4dp3-gxl .4s cubic-bezier(.22,1,.36,1) 0.78s both} .ds_a-wrap.in #ds_a-t3:checked~.ds_a-panels .v4_data_p3-f1win, .in .ds_a-wrap #ds_a-t3:checked~.ds_a-panels .v4_data_p3-f1win{animation:v4dp3-gxl .4s cubic-bezier(.22,1,.36,1) 0.73s both,v4dp3-winx 6s ease-in-out 0.73s infinite} .ds_a-wrap.in #ds_a-t3:checked~.ds_a-panels .v4_data_p3-f2top, .in .ds_a-wrap #ds_a-t3:checked~.ds_a-panels .v4_data_p3-f2top{animation:v4dp3-draw .72s cubic-bezier(.22,1,.36,1) 0.805s both,v4dp3-wide 6s ease-in-out 1.505s infinite} .ds_a-wrap.in #ds_a-t3:checked~.ds_a-panels .v4_data_p3-f2core, .in .ds_a-wrap #ds_a-t3:checked~.ds_a-panels .v4_data_p3-f2core{animation:v4dp3-pop .5s cubic-bezier(.34,1.56,.64,1) 1.145s both} .ds_a-wrap.in #ds_a-t3:checked~.ds_a-panels .v4_data_p3-f3b rect:nth-child(1), .in .ds_a-wrap #ds_a-t3:checked~.ds_a-panels .v4_data_p3-f3b rect:nth-child(1){animation:v4dp3-gy .44s cubic-bezier(.22,1,.36,1) 1.06s both} .ds_a-wrap.in #ds_a-t3:checked~.ds_a-panels .v4_data_p3-f3b rect:nth-child(2), .in .ds_a-wrap #ds_a-t3:checked~.ds_a-panels .v4_data_p3-f3b rect:nth-child(2){animation:v4dp3-gy .44s cubic-bezier(.22,1,.36,1) 1.12s both} .ds_a-wrap.in #ds_a-t3:checked~.ds_a-panels .v4_data_p3-f3b rect:nth-child(3), .in .ds_a-wrap #ds_a-t3:checked~.ds_a-panels .v4_data_p3-f3b rect:nth-child(3){animation:v4dp3-gy .44s cubic-bezier(.22,1,.36,1) 1.18s both} .ds_a-wrap.in #ds_a-t3:checked~.ds_a-panels .v4_data_p3-f3b rect:nth-child(4), .in .ds_a-wrap #ds_a-t3:checked~.ds_a-panels .v4_data_p3-f3b rect:nth-child(4){animation:v4dp3-gy .44s cubic-bezier(.22,1,.36,1) 1.24s both} .ds_a-wrap.in #ds_a-t3:checked~.ds_a-panels .v4_data_p3-f3arr, .in .ds_a-wrap #ds_a-t3:checked~.ds_a-panels .v4_data_p3-f3arr{animation:v4dp3-draw .52s cubic-bezier(.22,1,.36,1) 1.28s both} .ds_a-wrap.in #ds_a-t3:checked~.ds_a-panels .v4_data_p3-f3head, .in .ds_a-wrap #ds_a-t3:checked~.ds_a-panels .v4_data_p3-f3head{animation:v4dp3-pop .46s cubic-bezier(.34,1.56,.64,1) 1.68s both,v4dp3-bob 6s ease-in-out 2.16s infinite} .ds_a-wrap.in #ds_a-t3:checked~.ds_a-panels .v4_data_p3-f4b rect:nth-child(1), .in .ds_a-wrap #ds_a-t3:checked~.ds_a-panels .v4_data_p3-f4b rect:nth-child(1){animation:v4dp3-gy .42s cubic-bezier(.22,1,.36,1) 1.315s both} .ds_a-wrap.in #ds_a-t3:checked~.ds_a-panels .v4_data_p3-f4b rect:nth-child(2), .in .ds_a-wrap #ds_a-t3:checked~.ds_a-panels .v4_data_p3-f4b rect:nth-child(2){animation:v4dp3-gy .42s cubic-bezier(.22,1,.36,1) 1.365s both} .ds_a-wrap.in #ds_a-t3:checked~.ds_a-panels .v4_data_p3-f4b rect:nth-child(3), .in .ds_a-wrap #ds_a-t3:checked~.ds_a-panels .v4_data_p3-f4b rect:nth-child(3){animation:v4dp3-gy .42s cubic-bezier(.22,1,.36,1) 1.415s both} .ds_a-wrap.in #ds_a-t3:checked~.ds_a-panels .v4_data_p3-f4b rect:nth-child(4), .in .ds_a-wrap #ds_a-t3:checked~.ds_a-panels .v4_data_p3-f4b rect:nth-child(4){animation:v4dp3-gy .42s cubic-bezier(.22,1,.36,1) 1.465s both} .ds_a-wrap.in #ds_a-t3:checked~.ds_a-panels .v4_data_p3-f4b rect:nth-child(5), .in .ds_a-wrap #ds_a-t3:checked~.ds_a-panels .v4_data_p3-f4b rect:nth-child(5){animation:v4dp3-gy .42s cubic-bezier(.22,1,.36,1) 1.515s both} .ds_a-wrap.in #ds_a-t3:checked~.ds_a-panels .v4_data_p3-f4b rect:nth-child(6), .in .ds_a-wrap #ds_a-t3:checked~.ds_a-panels .v4_data_p3-f4b rect:nth-child(6){animation:v4dp3-gy .42s cubic-bezier(.22,1,.36,1) 1.565s both} .ds_a-wrap.in #ds_a-t3:checked~.ds_a-panels .v4_data_p3-f4b rect:nth-child(7), .in .ds_a-wrap #ds_a-t3:checked~.ds_a-panels .v4_data_p3-f4b rect:nth-child(7){animation:v4dp3-gy .42s cubic-bezier(.22,1,.36,1) 1.615s both} .ds_a-wrap.in #ds_a-t3:checked~.ds_a-panels .v4_data_p3-f4mk, .in .ds_a-wrap #ds_a-t3:checked~.ds_a-panels .v4_data_p3-f4mk{animation:v4dp3-pop .46s cubic-bezier(.34,1.56,.64,1) 1.715s both,v4dp3-bob 6s ease-in-out 2.265s infinite} .ds_a-wrap.in #ds_a-t3:checked~.ds_a-panels .v4_data_p3-f5d circle:nth-child(1), .in .ds_a-wrap #ds_a-t3:checked~.ds_a-panels .v4_data_p3-f5d circle:nth-child(1){animation:v4dp3-in .34s ease-out 1.57s both} .ds_a-wrap.in #ds_a-t3:checked~.ds_a-panels .v4_data_p3-f5d circle:nth-child(2), .in .ds_a-wrap #ds_a-t3:checked~.ds_a-panels .v4_data_p3-f5d circle:nth-child(2){animation:v4dp3-in .34s ease-out 1.605s both} .ds_a-wrap.in #ds_a-t3:checked~.ds_a-panels .v4_data_p3-f5d circle:nth-child(3), .in .ds_a-wrap #ds_a-t3:checked~.ds_a-panels .v4_data_p3-f5d circle:nth-child(3){animation:v4dp3-in .34s ease-out 1.64s both} .ds_a-wrap.in #ds_a-t3:checked~.ds_a-panels .v4_data_p3-f5d circle:nth-child(4), .in .ds_a-wrap #ds_a-t3:checked~.ds_a-panels .v4_data_p3-f5d circle:nth-child(4){animation:v4dp3-in .34s ease-out 1.675s both} .ds_a-wrap.in #ds_a-t3:checked~.ds_a-panels .v4_data_p3-f5d circle:nth-child(5), .in .ds_a-wrap #ds_a-t3:checked~.ds_a-panels .v4_data_p3-f5d circle:nth-child(5){animation:v4dp3-in .34s ease-out 1.71s both} .ds_a-wrap.in #ds_a-t3:checked~.ds_a-panels .v4_data_p3-f5d circle:nth-child(6), .in .ds_a-wrap #ds_a-t3:checked~.ds_a-panels .v4_data_p3-f5d circle:nth-child(6){animation:v4dp3-in .34s ease-out 1.745s both} .ds_a-wrap.in #ds_a-t3:checked~.ds_a-panels .v4_data_p3-f5d circle:nth-child(7), .in .ds_a-wrap #ds_a-t3:checked~.ds_a-panels .v4_data_p3-f5d circle:nth-child(7){animation:v4dp3-in .34s ease-out 1.78s both} .ds_a-wrap.in #ds_a-t3:checked~.ds_a-panels .v4_data_p3-f5d circle:nth-child(8), .in .ds_a-wrap #ds_a-t3:checked~.ds_a-panels .v4_data_p3-f5d circle:nth-child(8){animation:v4dp3-in .34s ease-out 1.815s both} .ds_a-wrap.in #ds_a-t3:checked~.ds_a-panels .v4_data_p3-f5d circle:nth-child(9), .in .ds_a-wrap #ds_a-t3:checked~.ds_a-panels .v4_data_p3-f5d circle:nth-child(9){animation:v4dp3-in .34s ease-out 1.85s both} .ds_a-wrap.in #ds_a-t3:checked~.ds_a-panels .v4_data_p3-f5gem, .in .ds_a-wrap #ds_a-t3:checked~.ds_a-panels .v4_data_p3-f5gem{animation:v4dp3-pop .48s cubic-bezier(.34,1.56,.64,1) 1.93s both,v4dp3-beat 6s ease-in-out 2.47s infinite} .ds_a-wrap.in #ds_a-t3:checked~.ds_a-panels .v4_data_p3-f5ring, .in .ds_a-wrap #ds_a-t3:checked~.ds_a-panels .v4_data_p3-f5ring{animation:v4dp3-settle .58s cubic-bezier(.22,1,.36,1) 1.99s both} .ds_a-wrap.in #ds_a-t3:checked~.ds_a-panels .v4_data_p3-f6flat, .in .ds_a-wrap #ds_a-t3:checked~.ds_a-panels .v4_data_p3-f6flat{animation:v4dp3-draw .36s linear 1.825s both} .ds_a-wrap.in #ds_a-t3:checked~.ds_a-panels .v4_data_p3-f6rise, .in .ds_a-wrap #ds_a-t3:checked~.ds_a-panels .v4_data_p3-f6rise{animation:v4dp3-draw .5s cubic-bezier(.22,1,.36,1) 2.125s both} .ds_a-wrap.in #ds_a-t3:checked~.ds_a-panels .v4_data_p3-f6v, .in .ds_a-wrap #ds_a-t3:checked~.ds_a-panels .v4_data_p3-f6v{animation:v4dp3-in .34s ease-out 2.505s both} .ds_a-wrap.in #ds_a-t3:checked~.ds_a-panels .v4_data_p3-f6dot, .in .ds_a-wrap #ds_a-t3:checked~.ds_a-panels .v4_data_p3-f6dot{animation:v4dp3-pop .46s cubic-bezier(.34,1.56,.64,1) 2.565s both} .ds_a-wrap.in #ds_a-t3:checked~.ds_a-panels .v4_data_p3-f6halo, .in .ds_a-wrap #ds_a-t3:checked~.ds_a-panels .v4_data_p3-f6halo{animation:v4dp3-halo 6s ease-out 2.775s infinite} .ds_a-wrap.in #ds_a-t3:checked~.ds_a-panels .v4_data_p3-f7sL, .in .ds_a-wrap #ds_a-t3:checked~.ds_a-panels .v4_data_p3-f7sL{animation:v4dp3-slideL .44s cubic-bezier(.22,1,.36,1) 2.08s both} .ds_a-wrap.in #ds_a-t3:checked~.ds_a-panels .v4_data_p3-f7sR, .in .ds_a-wrap #ds_a-t3:checked~.ds_a-panels .v4_data_p3-f7sR{animation:v4dp3-slideR .44s cubic-bezier(.22,1,.36,1) 2.14s both} .ds_a-wrap.in #ds_a-t3:checked~.ds_a-panels .v4_data_p3-f7c, .in .ds_a-wrap #ds_a-t3:checked~.ds_a-panels .v4_data_p3-f7c{animation:v4dp3-pop .5s cubic-bezier(.34,1.56,.64,1) 2.2s both} .ds_a-wrap.in #ds_a-t3:checked~.ds_a-panels .v4_data_p3-f7play, .in .ds_a-wrap #ds_a-t3:checked~.ds_a-panels .v4_data_p3-f7play{animation:v4dp3-pop .44s cubic-bezier(.34,1.56,.64,1) 2.38s both} .ds_a-wrap.in #ds_a-t3:checked~.ds_a-panels .v4_data_p3-f7live, .in .ds_a-wrap #ds_a-t3:checked~.ds_a-panels .v4_data_p3-f7live{animation:v4dp3-pop .42s cubic-bezier(.34,1.56,.64,1) 2.5s both,v4dp3-beat 6s ease-in-out 2.98s infinite} .ds_a-wrap.in #ds_a-t3:checked~.ds_a-panels .v4_data_p3-f8out, .in .ds_a-wrap #ds_a-t3:checked~.ds_a-panels .v4_data_p3-f8out{animation:v4dp3-in .42s ease-out 2.335s both} .ds_a-wrap.in #ds_a-t3:checked~.ds_a-panels .v4_data_p3-f8s1, .in .ds_a-wrap #ds_a-t3:checked~.ds_a-panels .v4_data_p3-f8s1{animation:v4dp3-gxl .42s cubic-bezier(.22,1,.36,1) 2.395s both} .ds_a-wrap.in #ds_a-t3:checked~.ds_a-panels .v4_data_p3-f8s2, .in .ds_a-wrap #ds_a-t3:checked~.ds_a-panels .v4_data_p3-f8s2{animation:v4dp3-gxl .42s cubic-bezier(.22,1,.36,1) 2.485s both} .ds_a-wrap.in #ds_a-t3:checked~.ds_a-panels .v4_data_p3-f8s3, .in .ds_a-wrap #ds_a-t3:checked~.ds_a-panels .v4_data_p3-f8s3{animation:v4dp3-gxl .42s cubic-bezier(.22,1,.36,1) 2.575s both} .ds_a-wrap.in #ds_a-t3:checked~.ds_a-panels .v4_data_p3-f8tk, .in .ds_a-wrap #ds_a-t3:checked~.ds_a-panels .v4_data_p3-f8tk{animation:v4dp3-in .3s ease-out 2.755s both} .ds_a-wrap.in #ds_a-t3:checked~.ds_a-panels .v4_data_p3-f8car, .in .ds_a-wrap #ds_a-t3:checked~.ds_a-panels .v4_data_p3-f8car{animation:v4dp3-in .3s ease-out 2.815s both,v4dp3-caret 6s ease-in-out 2.885s infinite} .ds_a-wrap.in #ds_a-t3:checked~.ds_a-panels .v4_data_p3-f9box, .in .ds_a-wrap #ds_a-t3:checked~.ds_a-panels .v4_data_p3-f9box{animation:v4dp3-pop .48s cubic-bezier(.34,1.56,.64,1) 2.59s both} .ds_a-wrap.in #ds_a-t3:checked~.ds_a-panels .v4_data_p3-f9tape, .in .ds_a-wrap #ds_a-t3:checked~.ds_a-panels .v4_data_p3-f9tape{animation:v4dp3-in .3s ease-out 2.81s both} .ds_a-wrap.in #ds_a-t3:checked~.ds_a-panels .v4_data_p3-f9tr path, .in .ds_a-wrap #ds_a-t3:checked~.ds_a-panels .v4_data_p3-f9tr path{animation:v4dp3-in .4s ease-out 2.75s both} .ds_a-wrap.in #ds_a-t3:checked~.ds_a-panels .v4_data_p3-f9n circle:nth-child(1), .in .ds_a-wrap #ds_a-t3:checked~.ds_a-panels .v4_data_p3-f9n circle:nth-child(1){animation:v4dp3-pop .46s cubic-bezier(.34,1.56,.64,1) 2.83s both} .ds_a-wrap.in #ds_a-t3:checked~.ds_a-panels .v4_data_p3-f9c circle:nth-child(1), .in .ds_a-wrap #ds_a-t3:checked~.ds_a-panels .v4_data_p3-f9c circle:nth-child(1){animation:v4dp3-pop .46s cubic-bezier(.34,1.56,.64,1) 2.91s both} .ds_a-wrap.in #ds_a-t3:checked~.ds_a-panels .v4_data_p3-f9d1, .in .ds_a-wrap #ds_a-t3:checked~.ds_a-panels .v4_data_p3-f9d1{animation:v4dp3-run 6s linear 3.39s infinite} .ds_a-wrap.in #ds_a-t3:checked~.ds_a-panels .v4_data_p3-f9n circle:nth-child(2), .in .ds_a-wrap #ds_a-t3:checked~.ds_a-panels .v4_data_p3-f9n circle:nth-child(2){animation:v4dp3-pop .46s cubic-bezier(.34,1.56,.64,1) 2.91s both} .ds_a-wrap.in #ds_a-t3:checked~.ds_a-panels .v4_data_p3-f9c circle:nth-child(2), .in .ds_a-wrap #ds_a-t3:checked~.ds_a-panels .v4_data_p3-f9c circle:nth-child(2){animation:v4dp3-pop .46s cubic-bezier(.34,1.56,.64,1) 2.99s both} .ds_a-wrap.in #ds_a-t3:checked~.ds_a-panels .v4_data_p3-f9d2, .in .ds_a-wrap #ds_a-t3:checked~.ds_a-panels .v4_data_p3-f9d2{animation:v4dp3-run 6s linear 3.81s infinite} .ds_a-wrap.in #ds_a-t3:checked~.ds_a-panels .v4_data_p3-f9n circle:nth-child(3), .in .ds_a-wrap #ds_a-t3:checked~.ds_a-panels .v4_data_p3-f9n circle:nth-child(3){animation:v4dp3-pop .46s cubic-bezier(.34,1.56,.64,1) 2.99s both} .ds_a-wrap.in #ds_a-t3:checked~.ds_a-panels .v4_data_p3-f9c circle:nth-child(3), .in .ds_a-wrap #ds_a-t3:checked~.ds_a-panels .v4_data_p3-f9c circle:nth-child(3){animation:v4dp3-pop .46s cubic-bezier(.34,1.56,.64,1) 3.07s both} .ds_a-wrap.in #ds_a-t3:checked~.ds_a-panels .v4_data_p3-f9d3, .in .ds_a-wrap #ds_a-t3:checked~.ds_a-panels .v4_data_p3-f9d3{animation:v4dp3-run 6s linear 4.23s infinite} .ds_a-wrap.in #ds_a-t3:checked~.ds_a-panels .v4_data_p3-f10c rect:nth-child(1), .in .ds_a-wrap #ds_a-t3:checked~.ds_a-panels .v4_data_p3-f10c rect:nth-child(1){animation:v4dp3-gy .4s cubic-bezier(.22,1,.36,1) 2.845s both} .ds_a-wrap.in #ds_a-t3:checked~.ds_a-panels .v4_data_p3-f10c rect:nth-child(2), .in .ds_a-wrap #ds_a-t3:checked~.ds_a-panels .v4_data_p3-f10c rect:nth-child(2){animation:v4dp3-gy .4s cubic-bezier(.22,1,.36,1) 2.895s both} .ds_a-wrap.in #ds_a-t3:checked~.ds_a-panels .v4_data_p3-f10c rect:nth-child(3), .in .ds_a-wrap #ds_a-t3:checked~.ds_a-panels .v4_data_p3-f10c rect:nth-child(3){animation:v4dp3-gy .4s cubic-bezier(.22,1,.36,1) 2.945s both} .ds_a-wrap.in #ds_a-t3:checked~.ds_a-panels .v4_data_p3-f10c rect:nth-child(4), .in .ds_a-wrap #ds_a-t3:checked~.ds_a-panels .v4_data_p3-f10c rect:nth-child(4){animation:v4dp3-gy .4s cubic-bezier(.22,1,.36,1) 2.995s both} .ds_a-wrap.in #ds_a-t3:checked~.ds_a-panels .v4_data_p3-f10c rect:nth-child(5), .in .ds_a-wrap #ds_a-t3:checked~.ds_a-panels .v4_data_p3-f10c rect:nth-child(5){animation:v4dp3-gy .4s cubic-bezier(.22,1,.36,1) 3.045s both} .ds_a-wrap.in #ds_a-t3:checked~.ds_a-panels .v4_data_p3-f10c rect:nth-child(6), .in .ds_a-wrap #ds_a-t3:checked~.ds_a-panels .v4_data_p3-f10c rect:nth-child(6){animation:v4dp3-gy .4s cubic-bezier(.22,1,.36,1) 3.095s both} .ds_a-wrap.in #ds_a-t3:checked~.ds_a-panels .v4_data_p3-f10c rect:nth-child(7), .in .ds_a-wrap #ds_a-t3:checked~.ds_a-panels .v4_data_p3-f10c rect:nth-child(7){animation:v4dp3-gy .4s cubic-bezier(.22,1,.36,1) 3.145s both} .ds_a-wrap.in #ds_a-t3:checked~.ds_a-panels .v4_data_p3-f10c rect:nth-child(8), .in .ds_a-wrap #ds_a-t3:checked~.ds_a-panels .v4_data_p3-f10c rect:nth-child(8){animation:v4dp3-gy .4s cubic-bezier(.22,1,.36,1) 3.195s both} .ds_a-wrap.in #ds_a-t3:checked~.ds_a-panels .v4_data_p3-f10bar, .in .ds_a-wrap #ds_a-t3:checked~.ds_a-panels .v4_data_p3-f10bar{animation:v4dp3-draw .62s cubic-bezier(.22,1,.36,1) 3.145s both} .ds_a-wrap.in #ds_a-t3:checked~.ds_a-panels .v4_data_p3-f10end, .in .ds_a-wrap #ds_a-t3:checked~.ds_a-panels .v4_data_p3-f10end{animation:v4dp3-pop .44s cubic-bezier(.34,1.56,.64,1) 3.465s both,v4dp3-beat 6s ease-in-out 3.945s infinite} /* ============ レスポンシブ ============ */ @media(max-width:820px){ /* 左の見出しブロックを1行に畳んで、リストに横幅を全部渡す */ .ds_a-fbox.v4_data_p3-box{grid-template-columns:1fr;gap:14px;margin-top:6px} .ds_a-fl.v4_data_p3-side{display:grid;grid-template-columns:auto auto 1fr; align-items:center;gap:0 13px;min-width:0;max-width:none} .ds_a-fl.v4_data_p3-side .ds_a-flt{margin:0} .ds_a-fl.v4_data_p3-side .ds_a-fld{grid-column:1/-1;margin:6px 0 0;font-size:11px} .v4_data_p3-ticks{margin:0;height:15px;gap:3.4px} .v4_data_p3-ticks i{width:2.6px} .ds_a-flist.v4_data_p3-list li{font-size:12px} .v4_data_p3-fig{width:54px;height:34px} } @media(max-width:600px){ .ds_a-flist.v4_data_p3-list{grid-template-columns:1fr;gap:3px} .ds_a-flist.v4_data_p3-list li{font-size:11.5px;gap:9px;padding:6px 6px;align-items:center} .v4_data_p3-fig{width:44px;height:28px} .v4_data_p3-ticks{gap:3px;height:13px} .v4_data_p3-ticks i{width:2.4px} .v4_data_p3-ticks i:nth-child(1){height:5.5px} .v4_data_p3-ticks i:nth-child(2){height:6.3px} .v4_data_p3-ticks i:nth-child(3){height:7.1px} .v4_data_p3-ticks i:nth-child(4){height:7.9px} .v4_data_p3-ticks i:nth-child(5){height:8.7px} .v4_data_p3-ticks i:nth-child(6){height:9.5px} .v4_data_p3-ticks i:nth-child(7){height:10.3px} .v4_data_p3-ticks i:nth-child(8){height:11.1px} .v4_data_p3-ticks i:nth-child(9){height:11.9px} .v4_data_p3-ticks i:nth-child(10){height:12.7px} } @media(max-width:360px){ .ds_a-fl.v4_data_p3-side{grid-template-columns:auto 1fr;gap:0 11px} .ds_a-fl.v4_data_p3-side .ds_a-flt{grid-row:1;grid-column:2} .v4_data_p3-ticks{grid-column:1/-1;margin:7px 0 0} .ds_a-flist.v4_data_p3-list li{font-size:11px;gap:8px} .v4_data_p3-fig{width:42px;height:27px} } /* ============ 動きを減らす設定 ============ */ @media(prefers-reduced-motion:reduce){ .v4_data_p3-beam{animation:none!important;display:none} .v4_data_p3-roll,.v4_data_p3-ticks i,.v4_data_p3-t, .ds_a-flist.v4_data_p3-list li,.ds_a-flist.v4_data_p3-list li::after, .v4_data_p3-fig rect,.v4_data_p3-fig circle,.v4_data_p3-fig path{animation:none!important} .v4_data_p3-f6halo{opacity:0} .v4_data_p3-f9d1,.v4_data_p3-f9d2,.v4_data_p3-f9d3{opacity:0} } /* ── report：02 REASONS と同等以上へ引き上げ（2026-09-03） */ /* ══════════════════════════════════════════════════════════════════════════ 06 REPORT ／ 左の図を「毎週おわたしする週次レポートの束」に差し替え（2026-09-03） 接頭辞 v4_report-。style.css の末尾に貼るだけで効く（既存ルールの書き換えは不要）。 右側（.rep-board / .rep-pen）には一切触っていない。 ■ 絵が語ること（02 REASONS と同じ塗り版：面を #FE2C55/#F5C6D1/#FDEBEF で塗り、 輪郭は #111215 の 1.3〜2px） 表紙＝週次レポート／配布日／グラフ／要点3行／来週の打ち手 その下に積み重なった過去の週（3枚の束） ■ 動きが語ること＝「ページがめくれて次の週の版になる」（1周12秒＝4秒×3週） ① 紙の小口（白い帯＋黒い縁）が右から左へ走る ② 小口が通り過ぎた所から順に、下の版が現れる （clip-path を小口の位置に一致させているので、本当にめくれて見える。 グラフは棒が伸びた版に、配布日は 9/08→9/15→9/22 に変わる） ③ 小口が届いていない左側は、まだ前の週のまま残っている ■ 右のペン演出（3.5秒で1回・繰り返さない）が終わる 3.8秒後から動き出す。 主役は右のチェック演出のまま、左は視界の端でゆっくり回り続ける。 ■ 小口の位置と clip-path の対応（表紙のパディングボックス＝幅142px 基準） 小口の左端 E は 129px →−20px を 0.9%→4.0% で移動 グラフ（x:11〜131）が入れ替わるのは 0.85%→3.36% 配布日（x:11〜57）が入れ替わるのは 2.40%→3.36%（小口が届くのが遅いぶん後ろ） ══════════════════════════════════════════════════════════════════════════ */ /* 図が112px→164pxに大きくなるぶん、左カラムを図の幅に合わせる （右のボードは max-width:600px なので 1008px幅では見た目が変わらない） */ @media(min-width:768px){ #report .repcard{grid-template-columns:186px 1fr;gap:30px} } .v4_report-fig{position:relative;width:164px;padding-top:18px} /* .rep-doc svg{width:112px} を図の中だけ打ち消す（既存ルールは触らない） */ .rep-doc .v4_report-fig svg{display:block;width:100%;height:auto} /* ── 束（過去の週）─────────────────────────────────────────────── */ .v4_report-sheet{position:absolute;left:0;top:18px;bottom:0;width:146px; background:#ffffff;border:2px solid #111215;border-radius:12px} .v4_report-s1{z-index:2;transform:translate(8px,-8px)} .v4_report-s2{z-index:1;transform:translate(16px,-16px)} /* ── 表紙 ───────────────────────────────────────────────────── */ .v4_report-cover{position:relative;z-index:3;width:146px;padding:11px;overflow:hidden; background:#ffffff;border:2px solid #111215;border-radius:12px; box-shadow:0 4px 12px rgba(17,18,21,.10)} .v4_report-band{display:block;height:26px;line-height:26px;border-radius:7px; background:#B01D36;color:#ffffff;text-align:center; font-size:11px;font-weight:800;letter-spacing:.08em} .v4_report-row{display:flex;align-items:center;gap:7px;margin-top:9px} .v4_report-chip{position:relative;flex:none;width:46px;height:20px; border-radius:999px;background:#F5C6D1;overflow:hidden} .v4_report-d{position:absolute;left:0;top:0;width:100%;height:20px;line-height:20px; text-align:center;color:#111215;font-style:normal; font-family:var(--f-num,'Inter','Helvetica Neue',Arial,sans-serif); font-size:11px;font-weight:800;letter-spacing:.02em} .v4_report-d2,.v4_report-d3{clip-path:inset(0% 0% 0% 100%)} .v4_report-rule{flex:1 1 auto;height:2px;border-radius:1px;background:#dcdfe4} .v4_report-dot{flex:none;width:7px;height:7px;border-radius:50%;background:#FE2C55} .v4_report-chart{position:relative;display:block;height:54px;margin-top:9px; background:#ffffff;border:1.8px solid #111215;border-radius:8px} /* 110:44 のSVGを3枚重ねる。padding-bottom で高さを作る */ .v4_report-plot{position:absolute;left:5px;right:5px;top:4px;padding-bottom:40%; transform-origin:50% 89%} .v4_report-ph{position:absolute;left:0;top:0;width:100%} .v4_report-p2,.v4_report-p3{clip-path:inset(0% 0% 0% 100%)} .v4_report-tr{stroke-dasharray:90;stroke-dashoffset:0} .v4_report-tip{transform-box:fill-box;transform-origin:50% 50%} .v4_report-pts{display:flex;flex-direction:column;gap:6px;margin-top:10px} .v4_report-pt{display:flex;align-items:center;gap:6px} .v4_report-sq{flex:none;width:6px;height:6px;border-radius:2px;font-style:normal} .v4_report-sqa{background:#FE2C55} .v4_report-sqb{background:#111215} .v4_report-tl{display:block;height:5px;border-radius:3px;font-style:normal} .v4_report-tl1{width:88px;background:#c3c8d0} .v4_report-tl2{width:80px;background:#c3c8d0} .v4_report-tl3{width:58px;background:#dcdfe4} .v4_report-next{display:flex;align-items:center;gap:6px;height:26px;padding:0 9px; margin-top:10px;border-radius:8px;background:#FDEBEF} .v4_report-next b{font-size:11px;font-weight:800;color:#B01D36;letter-spacing:.02em} .v4_report-arw{flex:none;width:14px;height:14px;margin-left:auto} /* めくっている紙の小口。既定は表紙の外・非表示 */ .v4_report-wipe{position:absolute;left:0;top:-2px;bottom:-2px;width:18px;z-index:5; background:#ffffff;border-left:2px solid #111215;opacity:0;pointer-events:none; box-shadow:-8px 0 12px -8px rgba(17,18,21,.45);transform:translateX(142px)} /* ══ 出現（スクロールで入ったとき1回だけ）══════════════════════════════ */ @keyframes v4_report-pop{from{opacity:0;transform:translateY(10px) scale(.94)}to{opacity:1;transform:none}} @keyframes v4_report-fan1{from{opacity:0;transform:translate(0,0)}to{opacity:1;transform:translate(8px,-8px)}} @keyframes v4_report-fan2{from{opacity:0;transform:translate(0,0)}to{opacity:1;transform:translate(16px,-16px)}} @keyframes v4_report-grow{from{opacity:0;transform:scaleY(.18)}to{opacity:1;transform:none}} @keyframes v4_report-rise{from{opacity:0;transform:translateY(7px)}to{opacity:1;transform:none}} @keyframes v4_report-drawin{from{stroke-dashoffset:90}to{stroke-dashoffset:0}} @keyframes v4_report-tipin{from{opacity:0;transform:scale(.2)}to{opacity:1;transform:none}} .v4_report-wrap.in .v4_report-cover,.in .v4_report-wrap .v4_report-cover{ animation:v4_report-pop .62s cubic-bezier(.34,1.56,.64,1) .06s backwards} .v4_report-wrap.in .v4_report-s1,.in .v4_report-wrap .v4_report-s1{ animation:v4_report-fan1 .55s cubic-bezier(.34,1.56,.64,1) .28s backwards} .v4_report-wrap.in .v4_report-s2,.in .v4_report-wrap .v4_report-s2{ animation:v4_report-fan2 .55s cubic-bezier(.34,1.56,.64,1) .42s backwards} .v4_report-wrap.in .v4_report-plot,.in .v4_report-wrap .v4_report-plot{ animation:v4_report-grow .60s cubic-bezier(.34,1.56,.64,1) .52s backwards} .v4_report-wrap.in .v4_report-next,.in .v4_report-wrap .v4_report-next{ animation:v4_report-rise .50s cubic-bezier(.22,1,.36,1) .84s backwards} /* 1週目の折れ線は、出現のときに一度引かれる */ .v4_report-wrap.in .v4_report-tr1,.in .v4_report-wrap .v4_report-tr1{ animation:v4_report-drawin .70s cubic-bezier(.22,1,.36,1) .72s both} .v4_report-wrap.in .v4_report-tip1,.in .v4_report-wrap .v4_report-tip1{ animation:v4_report-tipin .34s cubic-bezier(.34,1.56,.64,1) 1.30s backwards} /* ══ 繰り返し（3.8秒後・1周12秒）═══════════════════════════════════ 小口が走るのは 0.9〜4.0% ／ 34.2〜37.3% ／ 67.5〜70.6%（各0.37秒） */ /* ① 紙の小口が右から左へ走る */ @keyframes v4_report-wipe{ 0%,.85%{transform:translateX(142px);opacity:0} .9%{transform:translateX(129px);opacity:1} 4%{transform:translateX(-20px);opacity:1} 4.4%{transform:translateX(-20px);opacity:0} 4.5%,34.15%{transform:translateX(142px);opacity:0} 34.2%{transform:translateX(129px);opacity:1} 37.3%{transform:translateX(-20px);opacity:1} 37.7%{transform:translateX(-20px);opacity:0} 37.8%,67.45%{transform:translateX(142px);opacity:0} 67.5%{transform:translateX(129px);opacity:1} 70.6%{transform:translateX(-20px);opacity:1} 71%{transform:translateX(-20px);opacity:0} 71.1%,100%{transform:translateX(142px);opacity:0}} .v4_report-wrap.in .v4_report-wipe,.in .v4_report-wrap .v4_report-wipe{ animation:v4_report-wipe 12s linear 3.8s infinite} /* ② グラフ：小口が通り過ぎた所から次の週の版が現れ、前の週は右から消えていく inset(0% 0% 0% 100%) ＝まだ現れていない／inset(0% 100% 0% 0%) ＝めくられて消えた */ @keyframes v4_report-phA{ 0%,.85%{clip-path:inset(0% 0% 0% 0%)} 3.36%,67.44%{clip-path:inset(0% 100% 0% 0%)} 67.45%{clip-path:inset(0% 0% 0% 100%)} 69.96%,100%{clip-path:inset(0% 0% 0% 0%)}} @keyframes v4_report-phB{ 0%,.85%{clip-path:inset(0% 0% 0% 100%)} 3.36%,34.15%{clip-path:inset(0% 0% 0% 0%)} 36.66%,100%{clip-path:inset(0% 100% 0% 0%)}} @keyframes v4_report-phC{ 0%,34.14%{clip-path:inset(0% 0% 0% 100%)} 34.15%{clip-path:inset(0% 0% 0% 100%)} 36.66%,67.45%{clip-path:inset(0% 0% 0% 0%)} 69.96%,100%{clip-path:inset(0% 100% 0% 0%)}} .v4_report-wrap.in .v4_report-p1,.in .v4_report-wrap .v4_report-p1{ animation:v4_report-phA 12s linear 3.8s infinite} .v4_report-wrap.in .v4_report-p2,.in .v4_report-wrap .v4_report-p2{ animation:v4_report-phB 12s linear 3.8s infinite} .v4_report-wrap.in .v4_report-p3,.in .v4_report-wrap .v4_report-p3{ animation:v4_report-phC 12s linear 3.8s infinite} /* ③ 配布日：小口が届くのが一番遅い（左端にある）ので、グラフより後で入れ替わる */ @keyframes v4_report-dA{ 0%,2.39%{clip-path:inset(0% 0% 0% 0%)} 3.36%,68.99%{clip-path:inset(0% 100% 0% 0%)} 69%{clip-path:inset(0% 0% 0% 100%)} 69.96%,100%{clip-path:inset(0% 0% 0% 0%)}} @keyframes v4_report-dB{ 0%,2.39%{clip-path:inset(0% 0% 0% 100%)} 3.36%,35.69%{clip-path:inset(0% 0% 0% 0%)} 36.66%,100%{clip-path:inset(0% 100% 0% 0%)}} @keyframes v4_report-dC{ 0%,35.68%{clip-path:inset(0% 0% 0% 100%)} 35.69%{clip-path:inset(0% 0% 0% 100%)} 36.66%,68.99%{clip-path:inset(0% 0% 0% 0%)} 69.96%,100%{clip-path:inset(0% 100% 0% 0%)}} .v4_report-wrap.in .v4_report-d1,.in .v4_report-wrap .v4_report-d1{ animation:v4_report-dA 12s linear 3.8s infinite} .v4_report-wrap.in .v4_report-d2,.in .v4_report-wrap .v4_report-d2{ animation:v4_report-dB 12s linear 3.8s infinite} .v4_report-wrap.in .v4_report-d3,.in .v4_report-wrap .v4_report-d3{ animation:v4_report-dC 12s linear 3.8s infinite} /* めくり始めに、更新の合図の点がひと呼吸する */ @keyframes v4_report-beat{ 0%{transform:scale(1)}.9%{transform:scale(1.55)}3%,34.2%{transform:scale(1)} 35.1%{transform:scale(1.55)}37.2%,67.5%{transform:scale(1)} 68.4%{transform:scale(1.55)}70.5%,100%{transform:scale(1)}} .v4_report-wrap.in .v4_report-dot,.in .v4_report-wrap .v4_report-dot{ animation:v4_report-beat 12s cubic-bezier(.34,1.56,.64,1) 3.8s infinite} /* めくり終わったあと、「来週の打ち手」の矢印がひと押し進む */ @keyframes v4_report-nudge{ 0%,4.5%{transform:none}6.5%{transform:translateX(3px)} 10.5%,37.8%{transform:none}39.8%{transform:translateX(3px)} 43.8%,71.1%{transform:none}73.1%{transform:translateX(3px)} 77.1%,100%{transform:none}} .v4_report-wrap.in .v4_report-arw,.in .v4_report-wrap .v4_report-arw{ animation:v4_report-nudge 12s cubic-bezier(.34,1.56,.64,1) 3.8s infinite} /* ── 狭い画面 ─────────────────────────────────────────────────── */ @media(max-width:359px){ .v4_report-fig{width:152px} .v4_report-sheet,.v4_report-cover{width:136px} .v4_report-tl1{width:78px}.v4_report-tl2{width:70px}.v4_report-tl3{width:50px} .v4_report-wipe{transform:translateX(132px)} } @media(prefers-reduced-motion:reduce){ .v4_report-mo{animation:none!important} .v4_report-wipe{display:none} .v4_report-tr{stroke-dashoffset:0} } /* 🔴 3分岐の合流点が seg2 の矢印より16px上にあり、線が繋がって見えなかった（実測）。 横は0pxで合っていたが縦を測っていなかった。図全体を実測ぶん下げて高さを合わせる。 */ @media(min-width:901px){ .ds_a-flow .ds_a-fan3{transform:translateY(16px)} } /* ── 05 CASTING：刈り取りレーンをTikTokシアンに（2026-09-03 江崎さん指示） 「回す＝赤の円」と「刈り取る＝青のレーン」で役割を色で分ける。 */ .v3_b1-band{background:#EAF9F8 !important;border-color:#25F4EE !important} .v3_b1-card{border-color:rgba(37,244,238,.45) !important} .v3_b1-card--last{border-color:#0E7490 !important} .v3_b1-ct{color:#111215} .v3_b1-card--last .v3_b1-ct{color:#0E7490 !important} .v3_b1-cico{background:#EAF9F8 !important} /* 円から下へ落ちる線と、レーン内の矢印も青に */ .v3_b1-stem{border-color:#0E7490 !important} .v3_b1-stem::before,.v3_b1-stem::after{border-color:#0E7490 !important;background:#0E7490 !important} .v3_b1-sdot{background:#0E7490 !important} .v3_b1-stemk{background:#0E7490 !important;color:#fff !important} .v3_b1-ar{color:#0E7490 !important} .v3_b1-ar::before,.v3_b1-ar::after{background:#0E7490 !important;border-color:#0E7490 !important} /* ── 09 STEPS：最後（キックオフ＝ゴール）だけTikTokシアンにして到達点を示す （2026-09-03 江崎さん「ここだけ青に」） */ .fl1-step:last-child .fl1-num{ background-color:#25F4EE !important;border-color:#0E7490 !important;color:#111215 !important; box-shadow:0 0 0 3px #fff, 0 0 14px rgba(37,244,238,.65) !important} @keyframes fl1-num-on-cy{ 0%{background-color:#fff;border-color:#F5C6D1;color:#B01D36;transform:scale(1)} 45%{transform:scale(1.22)} 100%{background-color:#25F4EE;border-color:#0E7490;color:#111215;transform:scale(1)}} .fl1-step:last-child .fl1-num{animation-name:fl1-num-on-cy !important} /* ── 05 CASTING（B改）：7つのイラストの中身を動かす（2026-09-03 江崎さん「イラストのアニメーション化されてない」） 円の4工程は12秒で1周し、①→②→③→④の順に3秒ずつ動く。刈り取りの3枚はその後に続く。 */ @keyframes q-pop{0%,4%{transform:scale(0);opacity:0}12%{transform:scale(1.3);opacity:1}18%,30%{transform:scale(1);opacity:1}38%,100%{transform:scale(0);opacity:0}} @keyframes q-draw{0%,6%{stroke-dasharray:26;stroke-dashoffset:26}16%,32%{stroke-dashoffset:0}40%,100%{stroke-dashoffset:26}} @keyframes q-bar{0%,4%{transform:scaleY(.15)}16%,32%{transform:scaleY(1)}42%,100%{transform:scaleY(.15)}} @keyframes q-scan{0%,6%{transform:translate(-16px,10px)}18%,30%{transform:translate(0,0)}42%,100%{transform:translate(-16px,10px)}} @keyframes q-dot{0%,8%{opacity:.2}16%,28%{opacity:1}36%,100%{opacity:.2}} @keyframes q-line{0%,6%{stroke-dasharray:60;stroke-dashoffset:60}20%,34%{stroke-dashoffset:0}44%,100%{stroke-dashoffset:60}} @keyframes q-up{0%,8%{transform:translateY(5px);opacity:0}20%,34%{transform:translateY(0);opacity:1}44%,100%{transform:translateY(-4px);opacity:0}} @keyframes q-wave{0%,10%{opacity:0}22%{opacity:1}34%{opacity:.35}44%,100%{opacity:0}} @keyframes q-star{0%,6%{transform:scale(0) rotate(-40deg);opacity:0}16%{transform:scale(1.35) rotate(0);opacity:1}24%,34%{transform:scale(1);opacity:1}44%,100%{transform:scale(0);opacity:0}} @keyframes q-card{0%,8%{transform:translateX(-5px)}20%,34%{transform:translateX(0)}44%,100%{transform:translateX(-5px)}} .v3_b1-wrap [class^="q1-"],.v3_b1-wrap [class^="q2-"],.v3_b1-wrap [class^="q3-"], .v3_b1-wrap [class^="q4-"],.v3_b1-wrap [class^="q5-"],.v3_b1-wrap [class^="q6-"], .v3_b1-wrap [class^="q7-"]{transform-box:fill-box;transform-origin:center} .v3_b1-wrap .q4-r1,.v3_b1-wrap .q4-r2,.v3_b1-wrap .q4-r3,.v3_b1-wrap .q4-r4, .v3_b1-wrap .q1-b1,.v3_b1-wrap .q1-b2,.v3_b1-wrap .q1-b3, .v3_b1-wrap .q7-b1,.v3_b1-wrap .q7-b2,.v3_b1-wrap .q7-b3{transform-origin:center bottom} /* ① クリエイター選定：虫眼鏡が寄って、実績の棒が立ち、選定できたチェックが出る */ .v3_b1-wrap.in .q1-lens,.in .v3_b1-wrap .q1-lens{animation:q-scan 12s ease-in-out infinite} .v3_b1-wrap.in .q1-b1,.in .v3_b1-wrap .q1-b1{animation:q-bar 12s cubic-bezier(.3,.7,.3,1) .1s infinite} .v3_b1-wrap.in .q1-b2,.in .v3_b1-wrap .q1-b2{animation:q-bar 12s cubic-bezier(.3,.7,.3,1) .2s infinite} .v3_b1-wrap.in .q1-b3,.in .v3_b1-wrap .q1-b3{animation:q-bar 12s cubic-bezier(.3,.7,.3,1) .3s infinite} .v3_b1-wrap.in .q1-ck,.in .v3_b1-wrap .q1-ck{animation:q-pop 12s cubic-bezier(.34,1.56,.64,1) .5s infinite} .v3_b1-wrap.in .q1-ckp,.in .v3_b1-wrap .q1-ckp{animation:q-draw 12s ease-out .6s infinite} /* ② 企画・制作：やり取りの点が灯り、原稿にチェックが入る（3秒ずらし） */ .v3_b1-wrap.in .q2-d1,.in .v3_b1-wrap .q2-d1{animation:q-dot 12s ease-in-out 3s infinite} .v3_b1-wrap.in .q2-d2,.in .v3_b1-wrap .q2-d2{animation:q-dot 12s ease-in-out 3.15s infinite} .v3_b1-wrap.in .q2-d3,.in .v3_b1-wrap .q2-d3{animation:q-dot 12s ease-in-out 3.3s infinite} .v3_b1-wrap.in .q2-chk,.in .v3_b1-wrap .q2-chk{animation:q-draw 12s ease-out 3.5s infinite} /* ③ 投稿：再生が押され、伸びの矢印が上がる（6秒ずらし） */ .v3_b1-wrap.in .q3-play,.in .v3_b1-wrap .q3-play{animation:q-pop 12s cubic-bezier(.34,1.56,.64,1) 6s infinite} .v3_b1-wrap.in .q3-up,.in .v3_b1-wrap .q3-up{animation:q-up 12s ease-out 6.3s infinite} /* ④ AI×データ分析：棒が立ち、折れ線が伸びて終点が光る（9秒ずらし） */ .v3_b1-wrap.in .q4-r1,.in .v3_b1-wrap .q4-r1{animation:q-bar 12s cubic-bezier(.3,.7,.3,1) 9s infinite} .v3_b1-wrap.in .q4-r2,.in .v3_b1-wrap .q4-r2{animation:q-bar 12s cubic-bezier(.3,.7,.3,1) 9.1s infinite} .v3_b1-wrap.in .q4-r3,.in .v3_b1-wrap .q4-r3{animation:q-bar 12s cubic-bezier(.3,.7,.3,1) 9.2s infinite} .v3_b1-wrap.in .q4-r4,.in .v3_b1-wrap .q4-r4{animation:q-bar 12s cubic-bezier(.3,.7,.3,1) 9.3s infinite} .v3_b1-wrap.in .q4-line,.in .v3_b1-wrap .q4-line{animation:q-line 12s ease-out 9.4s infinite} .v3_b1-wrap.in .q4-end,.in .v3_b1-wrap .q4-end{animation:q-pop 12s cubic-bezier(.34,1.56,.64,1) 9.8s infinite} /* 刈り取りの3枚：優良UGCが選ばれ→配信の波が広がり→売上が伸びる */ .v3_b1-wrap.in .q5-card,.in .v3_b1-wrap .q5-card{animation:q-card 12s ease-out 10s infinite} .v3_b1-wrap.in .q5-star,.in .v3_b1-wrap .q5-star{animation:q-star 12s cubic-bezier(.34,1.56,.64,1) 10.2s infinite} .v3_b1-wrap.in .q6-w1,.in .v3_b1-wrap .q6-w1{animation:q-wave 12s ease-out 10.5s infinite} .v3_b1-wrap.in .q6-w2,.in .v3_b1-wrap .q6-w2{animation:q-wave 12s ease-out 10.65s infinite} .v3_b1-wrap.in .q6-w3,.in .v3_b1-wrap .q6-w3{animation:q-wave 12s ease-out 10.8s infinite} .v3_b1-wrap.in .q7-b1,.in .v3_b1-wrap .q7-b1{animation:q-bar 12s cubic-bezier(.3,.7,.3,1) 11s infinite} .v3_b1-wrap.in .q7-b2,.in .v3_b1-wrap .q7-b2{animation:q-bar 12s cubic-bezier(.3,.7,.3,1) 11.1s infinite} .v3_b1-wrap.in .q7-b3,.in .v3_b1-wrap .q7-b3{animation:q-bar 12s cubic-bezier(.3,.7,.3,1) 11.2s infinite} .v3_b1-wrap.in .q7-up,.in .v3_b1-wrap .q7-up{animation:q-up 12s ease-out 11.3s infinite} .v3_b1-wrap.in .q7-yen,.in .v3_b1-wrap .q7-yen{animation:q-pop 12s cubic-bezier(.34,1.56,.64,1) 11.4s infinite} @media(prefers-reduced-motion:reduce){ .v3_b1-wrap [class^="q1-"],.v3_b1-wrap [class^="q2-"],.v3_b1-wrap [class^="q3-"], .v3_b1-wrap [class^="q4-"],.v3_b1-wrap [class^="q5-"],.v3_b1-wrap [class^="q6-"], .v3_b1-wrap [class^="q7-"]{animation:none!important;opacity:1!important;transform:none!important; stroke-dashoffset:0!important} } /* stem の破線は background-image のグラデーションで描かれている（borderではない）。ここを青に。 */ .v3_b1-stem{background-image:linear-gradient(#0E7490 55%, rgba(14,116,144,0) 55%) !important} /* 凡例の「枝＝売上に変える」の破線マークと、レーン内の矢印も青に揃える */ .v3_b1-lgB .v3_b1-lgi{border-top-color:#0E7490 !important} .v3_b1-bar{background:#0E7490 !important} .v3_b1-bdot{background:#0E7490 !important;border-color:#0E7490 !important} /* ── FV：SOLDトーストが商品カードに被る不具合の修正（2026-09-03） */ /* ============================================================================ v5_fvsold : FV の SOLD トーストが、スマホ内の商品カードに被る不具合の修正 （style.css の末尾に貼るだけで効く。既存セレクタは1つも書き換えていない） ■ 実測した原因（Playwright / getBoundingClientRect / .stage内の未スケール座標） .xsold は .stage の bottom:-10px（SP）/ -6px（≥768）/ -10px（≥1200）に置かれ、 トーストの上端が phone の下端より 63px も上に来ていた。 320px : .NF-card 55.5,971.9〜209.8,1035.9 と .lv-pop 89.4,931.4〜213.0,981.5 が 120.4 x 9.6px 交差。.lv-bottom とは 117.0 x 32.4px 交差 375px : lv-pop と 100.6 x 9.5px ／ 390px : 95.2 x 9.6px 768〜1440px : lv-pop とは非交差だが .lv-bottom（コメント入力バー）と 111.2x25.0 / 120.5x27.1 / 75.8x25.7px 交差 ■ 置き直しの根拠（.stage の未スケール座標。.fv .stage は scale .72/.78） phone AABB下端 : SP 532.1 / ≥768 614.6 / ≥1200 654.9 screen AABB下端 : SP 522.5 / ≥768 604.2 / ≥1200 643.8 .NF-card の高さ : 88.8（未スケール・共通） phone は rotate(-4deg) のため「左下の角」が最下点＝AABB下端と一致する。 screen 下端と phone 下端の差はわずか 9.6px しかなく、 「ベゼルにだけ半分かける」帯は取れない。よって phone の下端 +32px に逃がす。 32px の内訳＝出現時のオーバーシュート ＋ scale のゆれ ＋ NF-float の -6px ＋ 余白。 実測：1周期を 0.5% 刻みで止めても phone AABB 下端との隔たりは 15.3px 以上（page px）。 .lv-pop・.screen・.phone との矩形交差は 320〜1920px の全幅で 0。 水平位置（left）は現状のまま＝スマホの左下にぶら下がる見え方を保つ。 ========================================================================== */ /* --- 位置：商品カードより下、スマホの左下へ --- */ .xsold.v5_fvsold-wrap{bottom:-113px} /* SP : 540 -(532.1+32+88.8) */ @media(min-width:768px){ .xsold.v5_fvsold-wrap{bottom:-95px} /* ≥768: 640 -(614.6+32+88.8) */ } /* ≥1200:680 -(654.9+32+88.8)=-95.7 → 同値 */ /* --- モーション：売れた瞬間に下から跳ね上がって出て、すっと引っ込む --- */ /* .NF-card の NF-float（ふわり）と NF-blink（点滅）はそのまま残る */ .v5_fvsold-mo{display:block} @media (prefers-reduced-motion: no-preference){ .v5_fvsold-wrap .v5_fvsold-mo, .v5_fvsold-wrap.in .v5_fvsold-mo, .in .v5_fvsold-wrap .v5_fvsold-mo{ animation:v5_fvsold-pop 7.2s .9s cubic-bezier(.34,1.56,.64,1) infinite backwards} @keyframes v5_fvsold-pop{ 0% {opacity:0;transform:translateY(14px) scale(.94)} /* スマホの下に沈んでいる */ 9% {opacity:1;transform:translateY(0) scale(1)} /* 跳ね上がって出る＝売れた */ 80% {opacity:1;transform:translateY(0) scale(1)} /* 読ませる */ 90% {opacity:0;transform:translateY(9px) scale(.97)} /* すっと引っ込む */ 100%{opacity:0;transform:translateY(9px) scale(.97)} } } @media (prefers-reduced-motion: reduce){ .v5_fvsold-wrap .v5_fvsold-mo{animation:none;opacity:1;transform:none} } /* ── 02 REASONS 小カード②③：高さ揃え・イラストの大きさ統一・「アサイ：」見切れ修正（2026-09-03） */ /* ============================================================================ 02 REASONS 小カード②③ key = reasons23 （style.css の末尾に貼るだけで効く） 直した実測不具合（2026-09-03 実測） 1) 図エリアの高さ違いで h3 の開始位置が 20px ズレ（②170px / ③150px。768pxでは28px） 2) イラストの実寸が不揃い（② svg 375x150 / ③ 313x100、user-unit スケールは 1.79 対 1.04） 3) ③の アサイン が viewBox(300) を超えて「アサイ：」と見切れ 4) ③のラベル3つが font-size 7.5px（実効 7.8px） 直し方 ・両カードの図を .v5_reasons23-fig > .v5_reasons23-stage で包み、 viewBox を両方 "0 0 210 84" に統一 → 実寸もスケールも自動的に一致（h3 も自動で揃う） ・③の を全廃し、HTML の .v5_reasons23-lbl（11px）に出した ・③は viewBox が変わったので、座標に依存する既存CSS （.g-run の offset-path / .r4-yen と .g-box の transform-origin / r4scan の移動量） だけをこのスコープ内で貼り替えた。アニメーション本数・尺・イージングは元のまま ========================================================================== */ /* ── 図エリア（2枚で完全に同じ高さ。ここが揃うと h3 の位置が揃う） ── */ .v5_reasons23-fig{position:relative;margin:0 0 14px;padding:8px 0 0} .v5_reasons23-fig>.v5_reasons23-stage{ position:relative;display:block;width:100%;max-width:375px;height:auto;min-height:0; margin:0 auto;padding:0 0 22px;box-sizing:border-box; align-items:center;justify-content:center} .v5_reasons23-fig>.v5_reasons23-stage>svg{ display:block;width:100%;height:auto;max-width:100%;max-height:none} /* .rdia 既定（height:104px / padding-right:56px / display:flex）を打ち消す */ .v5_reasons23-fig>.v5_reasons23-pick{padding-right:0;padding-left:0} /* ── ③ のラベル：SVG 7.5px → HTML 11px。はみ出しが構造的に起きない flex 帯 ── padding は図の内容の左右端（pill x=8 / phone x=198）に合わせてある */ .v5_reasons23-cap{ position:absolute;left:0;right:0;bottom:5px;z-index:2; display:flex;justify-content:space-between;align-items:flex-end;gap:8px; padding:0 5.71% 0 3.81%;box-sizing:border-box;pointer-events:none} .v5_reasons23-lbl{ position:relative;display:inline-block; font-family:'Hiragino Sans','Hiragino Kaku Gothic ProN','Noto Sans JP',sans-serif; font-size:11px;line-height:1.3;font-weight:700;letter-spacing:.01em; color:#65686d;white-space:nowrap} .v5_reasons23-lbl::after{ content:"";position:absolute;left:0;right:0;bottom:-4px;height:2px;border-radius:1px; background:#FE2C55;transform:scaleX(0);transform-origin:left center;opacity:0} /* ── ③ 図の座標が変わったぶんだけ、既存アニメーションの参照点を貼り替える ── */ /* 🔴 既存の .g-run は cx/cy を持っていたため offset-path の基準点がズレ、 production では常に viewBox の外（実測 x=320.8 / viewBox幅300）に描かれて完全に見えていなかった。 cx/cy を外して 0,0 起点にすることで「点が経路を流れる＝アサインされる」動きが初めて出る */ .v5_reasons23-pick .g-run{offset-path:path("M130 54 C 142 36, 150 32, 162 40")} @supports not (offset-path:path("M0 0")){.v5_reasons23-pick .g-run{transform:translate(162px,40px)}} .v5_reasons23-pick .r4-yen, .v5_reasons23-pick .g-box{transform-box:fill-box;transform-origin:center} @media(prefers-reduced-motion:no-preference){ /* 走査リング：人が 32 ずつ並ぶ新レイアウトに合わせて移動量だけ差し替え（尺5s・イージングは元のまま） */ .v5_reasons23-pick.in .r4-scan, .in .v5_reasons23-pick .r4-scan{ animation:v5_reasons23-scan 5s cubic-bezier(.34,1.56,.64,1) infinite} @keyframes v5_reasons23-scan{ 0%,9%{transform:translateX(0);stroke-width:2.2;opacity:1} 15%,24%{transform:translateX(32px);stroke-width:2.2} 30%,36%{transform:translateX(64px);stroke-width:2.4} 41%{transform:translateX(64px);stroke-width:3.8} 46%,96%{transform:translateX(64px);stroke-width:2.6;opacity:1} 100%{transform:translateX(64px);opacity:1}} /* ラベルが工程に同期して点灯する＝いま図のどこが動いているかを言葉で示す 0-30%走査/保有プール → 34-64%ロック/販売実績で選抜 → 68-98%着弾/アサイン */ .v5_reasons23-pick.in .v5_reasons23-lbl, .in .v5_reasons23-pick .v5_reasons23-lbl{ animation:v5_reasons23-lit 5s linear infinite} .v5_reasons23-pick.in .v5_reasons23-lbl::after, .in .v5_reasons23-pick .v5_reasons23-lbl::after{ animation:v5_reasons23-bar 5s cubic-bezier(.34,1.56,.64,1) infinite} .v5_reasons23-pick.in .v5_reasons23-lbl2, .v5_reasons23-pick.in .v5_reasons23-lbl2::after, .in .v5_reasons23-pick .v5_reasons23-lbl2, .in .v5_reasons23-pick .v5_reasons23-lbl2::after{animation-delay:1.7s} .v5_reasons23-pick.in .v5_reasons23-lbl3, .v5_reasons23-pick.in .v5_reasons23-lbl3::after, .in .v5_reasons23-pick .v5_reasons23-lbl3, .in .v5_reasons23-pick .v5_reasons23-lbl3::after{animation-delay:3.4s} @keyframes v5_reasons23-lit{ 0%{color:#65686d}4%,24%{color:#111215}30%,100%{color:#65686d}} @keyframes v5_reasons23-bar{ 0%{transform:scaleX(0);opacity:0} 3%{opacity:1} 9%,24%{transform:scaleX(1);opacity:1} 30%,100%{transform:scaleX(1);opacity:0}} /* ② 中国＝完了 → 日本＝これから、のバトンを下線で渡す（既存の check / dot はそのまま） */ .v5_reasons23-cmp .rcmp-l::after, .v5_reasons23-cmp .rcmp-r::after{ content:"";position:absolute;left:0;right:0;bottom:-4px;height:2px;border-radius:1px; transform:scaleX(0);transform-origin:left center} .v5_reasons23-cmp .rcmp-l::after{background:#c3c8d0} .v5_reasons23-cmp .rcmp-r::after{background:#FE2C55} .v5_reasons23-cmp.in .rcmp-l::after, .in .v5_reasons23-cmp .rcmp-l::after{ animation:v5_reasons23-wipe .5s cubic-bezier(.34,1.56,.64,1) .45s forwards} .v5_reasons23-cmp.in .rcmp-r::after, .in .v5_reasons23-cmp .rcmp-r::after{ animation:v5_reasons23-wipe .5s cubic-bezier(.34,1.56,.64,1) 3.2s forwards} @keyframes v5_reasons23-wipe{from{transform:scaleX(0)}to{transform:scaleX(1)}} } /* ② のラベルは新しい図エリアの底に合わせる（③と同じ 5px 上げ） */ .v5_reasons23-cmp .rcmp-l, .v5_reasons23-cmp .rcmp-r{bottom:5px} @media(prefers-reduced-motion:reduce){ .v5_reasons23-lbl, .v5_reasons23-pick.in .v5_reasons23-lbl, .in .v5_reasons23-pick .v5_reasons23-lbl{animation:none;color:#111215} .v5_reasons23-lbl::after, .v5_reasons23-pick.in .v5_reasons23-lbl::after, .in .v5_reasons23-pick .v5_reasons23-lbl::after{ animation:none;transform:scaleX(1);opacity:1;background:#c3c8d0} .v5_reasons23-cmp .rcmp-l::after, .v5_reasons23-cmp .rcmp-r::after, .v5_reasons23-cmp.in .rcmp-l::after, .in .v5_reasons23-cmp .rcmp-l::after, .v5_reasons23-cmp.in .rcmp-r::after, .in .v5_reasons23-cmp .rcmp-r::after{animation:none;transform:scaleX(1)} } /* ── 03 CYCLE：イラスト拡大＋6アイコンのアニメーション化（2026-09-03） */ /* ═══════════════════════════════════════════════════════════════════ 03 CYCLE：6つの丸イラストを大きくし、工程の中身を写す動きを付ける （2026-09-03 江﨑さん指示「イラストが小さい／アニメーション化されてない」） ・丸 86→96px／イラスト 50→68px。SVGは 96x76 → 80x80 の正方形viewBoxに描き直し、 線幅も 1.3→1.7 に上げた（従来は実効0.68pxのヘアラインで潰れていた）。 ・6つは 01→06 の順に動く。既存のシアン発光 fl_a-litN（12.6秒で1周／各2.1秒）と同位相。 ・レール／ドットの基準位置は丸の中心（36px→48px）に合わせ直した。 ・待機形はキーフレームの中だけに置き、素の状態＝完成形にしてある。 こうしておくと prefers-reduced-motion で animation:none にしても図が欠けない。 ═══════════════════════════════════════════════════════════════════ */ /* ── 1. 丸とイラストを大きくする ───────────────────────────── */ .fl_a-wrap .fl_a-node .fl_a-disc{width:96px;height:96px} .fl_a-wrap .fl_a-node .fl_a-ic{width:68px;height:68px} .fl_a-wrap .fl_a-rail{top:48px} .fl_a-wrap .fl_a-dot{top:48px} /* 図の外へ出る動き（ダーツの飛来）は丸の外まで見せない：viewBoxで切る */ .fl_a-wrap .fl_a-ic svg{overflow:hidden} /* 丸が大きくなったぶん、ドットが縁に当たる位置（37.8px→42.8px）を引き直す */ @keyframes v5_cycle-run{0%,2.6984%{left:calc(8.3333% + 42.8px);opacity:0}5.7302%{left:calc(8.3333% + 42.8px);opacity:0}8.4286%{opacity:1}14.881%{opacity:1}15.0794%{left:calc(25.0% - 42.8px);opacity:0}20.8095%{left:calc(25.0% + 42.8px);opacity:0}23.5079%{opacity:1}29.9603%{opacity:1}30.1587%{left:calc(41.6667% - 42.8px);opacity:0}35.8889%{left:calc(41.6667% + 42.8px);opacity:0}38.5873%{opacity:1}45.0397%{opacity:1}45.2381%{left:calc(58.3333% - 42.8px);opacity:0}50.9683%{left:calc(58.3333% + 42.8px);opacity:0}53.6667%{opacity:1}60.119%{opacity:1}60.3175%{left:calc(75.0% - 42.8px);opacity:0}66.0476%{left:calc(75.0% + 42.8px);opacity:0}68.746%{opacity:1}75.1984%{opacity:1}75.3968%{left:calc(91.6667% - 42.8px);opacity:0}100%{left:calc(91.6667% - 42.8px);opacity:0}} @keyframes v5_cycle-runSP{0%,2.6984%{top:83.8px;opacity:0}5.7302%{top:83.8px;opacity:0}8.4286%{opacity:1}14.881%{opacity:1}15.0794%{top:116.2px;opacity:0}20.8095%{top:183.8px;opacity:0}23.5079%{opacity:1}29.9603%{opacity:1}30.1587%{top:216.2px;opacity:0}35.8889%{top:283.8px;opacity:0}38.5873%{opacity:1}45.0397%{opacity:1}45.2381%{top:316.2px;opacity:0}50.9683%{top:383.8px;opacity:0}53.6667%{opacity:1}60.119%{opacity:1}60.3175%{top:416.2px;opacity:0}66.0476%{top:483.8px;opacity:0}68.746%{opacity:1}75.1984%{opacity:1}75.3968%{top:516.2px;opacity:0}100%{top:516.2px;opacity:0}} .fl_a-wrap.rv.in .fl_a-dot,.in .fl_a-wrap.rv .fl_a-dot{animation-name:v5_cycle-run} @media(max-width:820px){ /* 丸を76pxにすると56pxトラックの中心(28px)では左に出過ぎるので、トラックごと64pxへ */ .fl_a-wrap .fl_a-node{grid-template-columns:64px 1fr} .fl_a-wrap .fl_a-rail{left:32px} .fl_a-wrap .fl_a-dot{left:32px} .fl_a-wrap .fl_a-node .fl_a-disc{width:76px;height:76px} .fl_a-wrap .fl_a-node .fl_a-ic{width:54px;height:54px} .fl_a-wrap.rv.in .fl_a-dot,.in .fl_a-wrap.rv .fl_a-dot{animation-name:v5_cycle-runSP} /* 番号が10.5pxで下限を割っていたので11pxに戻す */ .fl_a-wrap .fl_a-num{font-size:11px} } /* ── 2. 素の状態＝完成形（アニメを止めても図が成立する） ───────── */ .fl_a-wrap .v5_cycle-c1chk{stroke-dasharray:25;stroke-dashoffset:0} .fl_a-wrap .v5_cycle-c1ring{transform-box:view-box;transform-origin:46px 48px;transform:scale(1)} .fl_a-wrap .v5_cycle-c1mid{transform-box:view-box;transform-origin:46px 48px;transform:scale(1)} .fl_a-wrap .v5_cycle-c1in{transform-box:view-box;transform-origin:46px 48px;transform:scale(1)} .fl_a-wrap .v5_cycle-c1dart{transform-box:view-box;transform-origin:0 0;transform:translateY(0);opacity:1} .fl_a-wrap .v5_cycle-c1hit{transform-box:view-box;transform-origin:46px 48px;transform:scale(1)} .fl_a-wrap .v5_cycle-c1rip{transform-box:view-box;transform-origin:46px 48px;transform:scale(1);opacity:0} .fl_a-wrap .v5_cycle-c2back{transform-box:view-box;transform-origin:29px 40px;transform:translate(0,0);opacity:1} .fl_a-wrap .v5_cycle-c2front{transform-box:view-box;transform-origin:45px 39px;transform:scaleX(1)} .fl_a-wrap .v5_cycle-c2bar{transform-box:view-box;transform-origin:33px 59.2px;transform:scaleX(1)} .fl_a-wrap .v5_cycle-c2badge{transform-box:view-box;transform-origin:63px 17px;transform:scale(1);opacity:1} .fl_a-wrap .v5_cycle-c2tick{stroke-dasharray:16;stroke-dashoffset:0} .fl_a-wrap .v5_cycle-c3play{transform-box:view-box;transform-origin:40px 37px;transform:scale(1)} .fl_a-wrap .v5_cycle-c3badge{transform-box:view-box;transform-origin:16px 23px;transform:scale(1);opacity:1} .fl_a-wrap .v5_cycle-c3dot{opacity:1} .fl_a-wrap .v5_cycle-c3r1{transform-box:view-box;transform-origin:40px 37px;transform:translateX(0) scaleX(1);opacity:1} .fl_a-wrap .v5_cycle-c3r2{transform-box:view-box;transform-origin:40px 37px;transform:translateX(0) scaleX(1);opacity:1} .fl_a-wrap .v5_cycle-c3r3{transform-box:view-box;transform-origin:40px 37px;transform:translateX(0) scaleX(1);opacity:1} .fl_a-wrap .v5_cycle-c4horn{transform-box:view-box;transform-origin:25px 55px;transform:rotate(0)} .fl_a-wrap .v5_cycle-c4chk{transform-box:view-box;transform-origin:13px 14px;transform:scale(1);opacity:1} .fl_a-wrap .v5_cycle-c4tick{stroke-dasharray:16.2;stroke-dashoffset:0} .fl_a-wrap .v5_cycle-c4w1{transform-box:view-box;transform-origin:36px 42px;transform:translateX(0) scale(1);opacity:1} .fl_a-wrap .v5_cycle-c4w2{transform-box:view-box;transform-origin:36px 42px;transform:translateX(0) scale(1);opacity:1} .fl_a-wrap .v5_cycle-c4w3{transform-box:view-box;transform-origin:36px 42px;transform:translateX(0) scale(1);opacity:1} .fl_a-wrap .v5_cycle-c5s1{stroke-dasharray:37.7 56.55} .fl_a-wrap .v5_cycle-c5s2{stroke-dasharray:26.4 67.85} .fl_a-wrap .v5_cycle-c5b1{transform-box:view-box;transform-origin:0 67.5px;transform:scaleY(1)} .fl_a-wrap .v5_cycle-c5b2{transform-box:view-box;transform-origin:0 67.5px;transform:scaleY(1)} .fl_a-wrap .v5_cycle-c5b3{transform-box:view-box;transform-origin:0 67.5px;transform:scaleY(1)} .fl_a-wrap .v5_cycle-c5spark{transform-box:view-box;transform-origin:66px 16.7px;transform:scale(1) rotate(0);opacity:1} .fl_a-wrap .v5_cycle-c6ring{transform-box:view-box;transform-origin:40px 40px;transform:rotate(0)} .fl_a-wrap .v5_cycle-c6days{transform-box:view-box;transform-origin:40px 43px;transform:translateX(0);opacity:1} .fl_a-wrap .v5_cycle-c6mark{transform-box:view-box;transform-origin:31.5px 41.5px;transform:translate(9.5px,9px) scale(1);opacity:1} .fl_a-wrap .v5_cycle-c6up{transform-box:view-box;transform-origin:51px 30px;transform:translateY(0) scale(1);opacity:1} /* ── 3. 工程の中身を写す動き（01→06 の順・発光と同位相） ───────── */ @keyframes v5_cycle-c1chk{0%{stroke-dashoffset:25;animation-timing-function:linear}0.6746%{stroke-dashoffset:25;animation-timing-function:cubic-bezier(.22,1,.36,1)}3.2746%{stroke-dashoffset:25;animation-timing-function:cubic-bezier(.22,1,.36,1)}7.2746%{stroke-dashoffset:0;animation-timing-function:linear}91%{stroke-dashoffset:0;animation-timing-function:cubic-bezier(.22,1,.36,1)}95.8%{stroke-dashoffset:25;animation-timing-function:linear}100%{stroke-dashoffset:25}} @keyframes v5_cycle-c1ring{0%{transform:scale(1.14);animation-timing-function:linear}0.6746%{transform:scale(1.14);animation-timing-function:cubic-bezier(.34,1.56,.64,1)}8.0746%{transform:scale(1);animation-timing-function:linear}91%{transform:scale(1);animation-timing-function:cubic-bezier(.22,1,.36,1)}95.8%{transform:scale(1.14);animation-timing-function:linear}100%{transform:scale(1.14)}} @keyframes v5_cycle-c1mid{0%{transform:scale(1.22);animation-timing-function:linear}0.6746%{transform:scale(1.22);animation-timing-function:cubic-bezier(.34,1.56,.64,1)}1.6746%{transform:scale(1.22);animation-timing-function:cubic-bezier(.34,1.56,.64,1)}9.0746%{transform:scale(1);animation-timing-function:linear}91%{transform:scale(1);animation-timing-function:cubic-bezier(.22,1,.36,1)}95.8%{transform:scale(1.22);animation-timing-function:linear}100%{transform:scale(1.22)}} @keyframes v5_cycle-c1in{0%{transform:scale(1.3);animation-timing-function:linear}0.6746%{transform:scale(1.3);animation-timing-function:cubic-bezier(.34,1.56,.64,1)}2.6746%{transform:scale(1.3);animation-timing-function:cubic-bezier(.34,1.56,.64,1)}10.0746%{transform:scale(1);animation-timing-function:linear}91%{transform:scale(1);animation-timing-function:cubic-bezier(.22,1,.36,1)}95.8%{transform:scale(1.3);animation-timing-function:linear}100%{transform:scale(1.3)}} @keyframes v5_cycle-c1dart{0%{transform:translateY(-80px);opacity:0;animation-timing-function:linear}0.6746%{transform:translateY(-80px);opacity:0;animation-timing-function:linear}1.8746%{transform:translateY(-80px);opacity:0;animation-timing-function:cubic-bezier(.34,1.56,.64,1)}2.5746%{opacity:1;animation-timing-function:cubic-bezier(.34,1.56,.64,1)}6.2746%{transform:translateY(0);opacity:1;animation-timing-function:linear}91%{transform:translateY(0);opacity:1;animation-timing-function:cubic-bezier(.22,1,.36,1)}95.8%{transform:translateY(-80px);opacity:0;animation-timing-function:linear}100%{transform:translateY(-80px);opacity:0}} @keyframes v5_cycle-c1hit{0%{transform:scale(0);animation-timing-function:linear}0.6746%{transform:scale(0);animation-timing-function:cubic-bezier(.34,1.56,.64,1)}5.6746%{transform:scale(0);animation-timing-function:cubic-bezier(.34,1.56,.64,1)}8.0746%{transform:scale(1);animation-timing-function:linear}91%{transform:scale(1);animation-timing-function:cubic-bezier(.22,1,.36,1)}95.8%{transform:scale(0);animation-timing-function:linear}100%{transform:scale(0)}} @keyframes v5_cycle-c1rip{0%{transform:scale(.55);opacity:0;animation-timing-function:linear}0.6746%{transform:scale(.55);opacity:0;animation-timing-function:linear}5.8746%{transform:scale(.55);opacity:.95;animation-timing-function:cubic-bezier(.22,1,.36,1)}10.2746%{transform:scale(1.9);opacity:0;animation-timing-function:linear}91%{transform:scale(1.9);opacity:0;animation-timing-function:cubic-bezier(.22,1,.36,1)}95.8%{transform:scale(.55);opacity:0;animation-timing-function:linear}100%{transform:scale(.55);opacity:0}} @keyframes v5_cycle-c2back{0%{transform:translate(9px,5px);opacity:0;animation-timing-function:linear}15.754%{transform:translate(9px,5px);opacity:0;animation-timing-function:cubic-bezier(.34,1.56,.64,1)}20.354%{transform:translate(0,0);opacity:1;animation-timing-function:linear}91%{transform:translate(0,0);opacity:1;animation-timing-function:cubic-bezier(.22,1,.36,1)}95.8%{transform:translate(9px,5px);opacity:0;animation-timing-function:linear}100%{transform:translate(9px,5px);opacity:0}} @keyframes v5_cycle-c2front{0%{transform:scaleX(.06);animation-timing-function:linear}15.754%{transform:scaleX(.06);animation-timing-function:linear}16.554%{transform:scaleX(.06);animation-timing-function:cubic-bezier(.34,1.56,.64,1)}21.154%{transform:scaleX(1);animation-timing-function:linear}91%{transform:scaleX(1);animation-timing-function:cubic-bezier(.22,1,.36,1)}95.8%{transform:scaleX(.06);animation-timing-function:linear}100%{transform:scaleX(.06)}} @keyframes v5_cycle-c2bar{0%{transform:scaleX(0);animation-timing-function:linear}15.754%{transform:scaleX(0);animation-timing-function:linear}19.354%{transform:scaleX(0);animation-timing-function:cubic-bezier(.22,1,.36,1)}24.354%{transform:scaleX(1);animation-timing-function:linear}91%{transform:scaleX(1);animation-timing-function:cubic-bezier(.22,1,.36,1)}95.8%{transform:scaleX(0);animation-timing-function:linear}100%{transform:scaleX(0)}} @keyframes v5_cycle-c2badge{0%{transform:scale(0);opacity:0;animation-timing-function:linear}15.754%{transform:scale(0);opacity:0;animation-timing-function:linear}20.154%{transform:scale(0);opacity:1;animation-timing-function:cubic-bezier(.34,1.56,.64,1)}23.154%{transform:scale(1);opacity:1;animation-timing-function:linear}91%{transform:scale(1);opacity:1;animation-timing-function:cubic-bezier(.22,1,.36,1)}95.8%{transform:scale(0);opacity:0;animation-timing-function:linear}100%{transform:scale(0);opacity:0}} @keyframes v5_cycle-c2tick{0%{stroke-dashoffset:16;animation-timing-function:linear}15.754%{stroke-dashoffset:16;animation-timing-function:linear}21.954%{stroke-dashoffset:16;animation-timing-function:cubic-bezier(.22,1,.36,1)}25.154%{stroke-dashoffset:0;animation-timing-function:linear}91%{stroke-dashoffset:0;animation-timing-function:cubic-bezier(.22,1,.36,1)}95.8%{stroke-dashoffset:16;animation-timing-function:linear}100%{stroke-dashoffset:16}} @keyframes v5_cycle-c3play{0%{transform:scale(1);animation-timing-function:linear}30.8333%{transform:scale(1);animation-timing-function:cubic-bezier(.22,1,.36,1)}32.4333%{transform:scale(.8);animation-timing-function:cubic-bezier(.34,1.56,.64,1)}35.2333%{transform:scale(1);animation-timing-function:linear}91%{transform:scale(1);animation-timing-function:cubic-bezier(.22,1,.36,1)}95.8%{transform:scale(1);animation-timing-function:linear}100%{transform:scale(1)}} @keyframes v5_cycle-c3badge{0%{transform:scale(.4);opacity:0;animation-timing-function:linear}30.8333%{transform:scale(.4);opacity:0;animation-timing-function:linear}32.8333%{transform:scale(.4);opacity:1;animation-timing-function:cubic-bezier(.34,1.56,.64,1)}35.8333%{transform:scale(1);opacity:1;animation-timing-function:linear}91%{transform:scale(1);opacity:1;animation-timing-function:cubic-bezier(.22,1,.36,1)}95.8%{transform:scale(.4);opacity:0;animation-timing-function:linear}100%{transform:scale(.4);opacity:0}} @keyframes v5_cycle-c3dot{0%{opacity:1;animation-timing-function:linear}30.8333%{opacity:1;animation-timing-function:linear}36.0333%{opacity:1;animation-timing-function:linear}37.2333%{opacity:.15;animation-timing-function:linear}38.4333%{opacity:1;animation-timing-function:linear}39.6333%{opacity:.15;animation-timing-function:linear}40.8333%{opacity:1;animation-timing-function:linear}91%{opacity:1;animation-timing-function:cubic-bezier(.22,1,.36,1)}95.8%{opacity:1;animation-timing-function:linear}100%{opacity:1}} @keyframes v5_cycle-c3r1{0%{transform:translateX(-7px) scaleX(.7);opacity:0;animation-timing-function:linear}30.8333%{transform:translateX(-7px) scaleX(.7);opacity:0;animation-timing-function:linear}34.0333%{transform:translateX(-7px) scaleX(.7);opacity:0;animation-timing-function:cubic-bezier(.34,1.56,.64,1)}38.2333%{transform:translateX(0) scaleX(1);opacity:1;animation-timing-function:linear}91%{transform:translateX(0) scaleX(1);opacity:1;animation-timing-function:cubic-bezier(.22,1,.36,1)}95.8%{transform:translateX(-7px) scaleX(.7);opacity:0;animation-timing-function:linear}100%{transform:translateX(-7px) scaleX(.7);opacity:0}} @keyframes v5_cycle-c3r2{0%{transform:translateX(-7px) scaleX(.7);opacity:0;animation-timing-function:linear}30.8333%{transform:translateX(-7px) scaleX(.7);opacity:0;animation-timing-function:linear}35.2333%{transform:translateX(-7px) scaleX(.7);opacity:0;animation-timing-function:cubic-bezier(.34,1.56,.64,1)}39.4333%{transform:translateX(0) scaleX(1);opacity:1;animation-timing-function:linear}91%{transform:translateX(0) scaleX(1);opacity:1;animation-timing-function:cubic-bezier(.22,1,.36,1)}95.8%{transform:translateX(-7px) scaleX(.7);opacity:0;animation-timing-function:linear}100%{transform:translateX(-7px) scaleX(.7);opacity:0}} @keyframes v5_cycle-c3r3{0%{transform:translateX(-7px) scaleX(.7);opacity:0;animation-timing-function:linear}30.8333%{transform:translateX(-7px) scaleX(.7);opacity:0;animation-timing-function:linear}36.4333%{transform:translateX(-7px) scaleX(.7);opacity:0;animation-timing-function:cubic-bezier(.34,1.56,.64,1)}40.6333%{transform:translateX(0) scaleX(1);opacity:1;animation-timing-function:linear}91%{transform:translateX(0) scaleX(1);opacity:1;animation-timing-function:cubic-bezier(.22,1,.36,1)}95.8%{transform:translateX(-7px) scaleX(.7);opacity:0;animation-timing-function:linear}100%{transform:translateX(-7px) scaleX(.7);opacity:0}} @keyframes v5_cycle-c4horn{0%{transform:rotate(9deg);animation-timing-function:linear}45.9127%{transform:rotate(9deg);animation-timing-function:cubic-bezier(.34,1.56,.64,1)}51.3127%{transform:rotate(0);animation-timing-function:linear}91%{transform:rotate(0);animation-timing-function:cubic-bezier(.22,1,.36,1)}95.8%{transform:rotate(9deg);animation-timing-function:linear}100%{transform:rotate(9deg)}} @keyframes v5_cycle-c4chk{0%{transform:scale(0);opacity:0;animation-timing-function:linear}45.9127%{transform:scale(0);opacity:0;animation-timing-function:linear}51.5127%{transform:scale(0);opacity:1;animation-timing-function:cubic-bezier(.34,1.56,.64,1)}54.3127%{transform:scale(1);opacity:1;animation-timing-function:linear}91%{transform:scale(1);opacity:1;animation-timing-function:cubic-bezier(.22,1,.36,1)}95.8%{transform:scale(0);opacity:0;animation-timing-function:linear}100%{transform:scale(0);opacity:0}} @keyframes v5_cycle-c4tick{0%{stroke-dashoffset:16.2;animation-timing-function:linear}45.9127%{stroke-dashoffset:16.2;animation-timing-function:linear}53.3127%{stroke-dashoffset:16.2;animation-timing-function:cubic-bezier(.22,1,.36,1)}56.1127%{stroke-dashoffset:0;animation-timing-function:linear}91%{stroke-dashoffset:0;animation-timing-function:cubic-bezier(.22,1,.36,1)}95.8%{stroke-dashoffset:16.2;animation-timing-function:linear}100%{stroke-dashoffset:16.2}} @keyframes v5_cycle-c4w1{0%{transform:translateX(-9px) scale(.72);opacity:0;animation-timing-function:linear}45.9127%{transform:translateX(-9px) scale(.72);opacity:0;animation-timing-function:linear}47.7127%{transform:translateX(-9px) scale(.72);opacity:0;animation-timing-function:cubic-bezier(.34,1.56,.64,1)}52.1127%{transform:translateX(0) scale(1);opacity:1;animation-timing-function:linear}91%{transform:translateX(0) scale(1);opacity:1;animation-timing-function:cubic-bezier(.22,1,.36,1)}95.8%{transform:translateX(-9px) scale(.72);opacity:0;animation-timing-function:linear}100%{transform:translateX(-9px) scale(.72);opacity:0}} @keyframes v5_cycle-c4w2{0%{transform:translateX(-9px) scale(.72);opacity:0;animation-timing-function:linear}45.9127%{transform:translateX(-9px) scale(.72);opacity:0;animation-timing-function:linear}49.1127%{transform:translateX(-9px) scale(.72);opacity:0;animation-timing-function:cubic-bezier(.34,1.56,.64,1)}53.5127%{transform:translateX(0) scale(1);opacity:1;animation-timing-function:linear}91%{transform:translateX(0) scale(1);opacity:1;animation-timing-function:cubic-bezier(.22,1,.36,1)}95.8%{transform:translateX(-9px) scale(.72);opacity:0;animation-timing-function:linear}100%{transform:translateX(-9px) scale(.72);opacity:0}} @keyframes v5_cycle-c4w3{0%{transform:translateX(-9px) scale(.72);opacity:0;animation-timing-function:linear}45.9127%{transform:translateX(-9px) scale(.72);opacity:0;animation-timing-function:linear}50.5127%{transform:translateX(-9px) scale(.72);opacity:0;animation-timing-function:cubic-bezier(.34,1.56,.64,1)}54.9127%{transform:translateX(0) scale(1);opacity:1;animation-timing-function:linear}91%{transform:translateX(0) scale(1);opacity:1;animation-timing-function:cubic-bezier(.22,1,.36,1)}95.8%{transform:translateX(-9px) scale(.72);opacity:0;animation-timing-function:linear}100%{transform:translateX(-9px) scale(.72);opacity:0}} @keyframes v5_cycle-c5s1{0%{stroke-dasharray:0 94.25;animation-timing-function:linear}60.9921%{stroke-dasharray:0 94.25;animation-timing-function:cubic-bezier(.22,1,.36,1)}65.9921%{stroke-dasharray:37.7 56.55;animation-timing-function:linear}91%{stroke-dasharray:37.7 56.55;animation-timing-function:cubic-bezier(.22,1,.36,1)}95.8%{stroke-dasharray:0 94.25;animation-timing-function:linear}100%{stroke-dasharray:0 94.25}} @keyframes v5_cycle-c5s2{0%{stroke-dasharray:0 94.25;animation-timing-function:linear}60.9921%{stroke-dasharray:0 94.25;animation-timing-function:linear}64.3921%{stroke-dasharray:0 94.25;animation-timing-function:cubic-bezier(.22,1,.36,1)}68.5921%{stroke-dasharray:26.4 67.85;animation-timing-function:linear}91%{stroke-dasharray:26.4 67.85;animation-timing-function:cubic-bezier(.22,1,.36,1)}95.8%{stroke-dasharray:0 94.25;animation-timing-function:linear}100%{stroke-dasharray:0 94.25}} @keyframes v5_cycle-c5b1{0%{transform:scaleY(0);animation-timing-function:linear}60.9921%{transform:scaleY(0);animation-timing-function:linear}64.3921%{transform:scaleY(0);animation-timing-function:cubic-bezier(.34,1.56,.64,1)}68.5921%{transform:scaleY(1);animation-timing-function:linear}91%{transform:scaleY(1);animation-timing-function:cubic-bezier(.22,1,.36,1)}95.8%{transform:scaleY(0);animation-timing-function:linear}100%{transform:scaleY(0)}} @keyframes v5_cycle-c5b2{0%{transform:scaleY(0);animation-timing-function:linear}60.9921%{transform:scaleY(0);animation-timing-function:linear}65.5921%{transform:scaleY(0);animation-timing-function:cubic-bezier(.34,1.56,.64,1)}69.7921%{transform:scaleY(1);animation-timing-function:linear}91%{transform:scaleY(1);animation-timing-function:cubic-bezier(.22,1,.36,1)}95.8%{transform:scaleY(0);animation-timing-function:linear}100%{transform:scaleY(0)}} @keyframes v5_cycle-c5b3{0%{transform:scaleY(0);animation-timing-function:linear}60.9921%{transform:scaleY(0);animation-timing-function:linear}66.7921%{transform:scaleY(0);animation-timing-function:cubic-bezier(.34,1.56,.64,1)}70.9921%{transform:scaleY(1);animation-timing-function:linear}91%{transform:scaleY(1);animation-timing-function:cubic-bezier(.22,1,.36,1)}95.8%{transform:scaleY(0);animation-timing-function:linear}100%{transform:scaleY(0)}} @keyframes v5_cycle-c5spark{0%{transform:scale(0) rotate(-70deg);opacity:0;animation-timing-function:linear}60.9921%{transform:scale(0) rotate(-70deg);opacity:0;animation-timing-function:linear}67.5921%{transform:scale(0) rotate(-70deg);opacity:1;animation-timing-function:cubic-bezier(.34,1.56,.64,1)}70.9921%{transform:scale(1) rotate(0);opacity:1;animation-timing-function:linear}91%{transform:scale(1) rotate(0);opacity:1;animation-timing-function:cubic-bezier(.22,1,.36,1)}95.8%{transform:scale(0) rotate(-70deg);opacity:0;animation-timing-function:linear}100%{transform:scale(0) rotate(-70deg);opacity:0}} @keyframes v5_cycle-c6ring{0%{transform:rotate(0);animation-timing-function:linear}76.0714%{transform:rotate(0);animation-timing-function:cubic-bezier(.62,0,.36,1)}85.0714%{transform:rotate(360deg);animation-timing-function:linear}91%{transform:rotate(360deg);animation-timing-function:cubic-bezier(.22,1,.36,1)}95.8%{transform:rotate(0);animation-timing-function:linear}100%{transform:rotate(0)}} @keyframes v5_cycle-c6days{0%{transform:translateX(0);opacity:1;animation-timing-function:linear}76.0714%{transform:translateX(0);opacity:1;animation-timing-function:cubic-bezier(.22,1,.36,1)}79.4714%{transform:translateX(0);opacity:1;animation-timing-function:ease-in}81.4714%{transform:translateX(-11px);opacity:0;animation-timing-function:linear}81.6714%{transform:translateX(11px);opacity:0;animation-timing-function:cubic-bezier(.22,1,.36,1)}84.2714%{transform:translateX(0);opacity:1;animation-timing-function:linear}91%{transform:translateX(0);opacity:1;animation-timing-function:cubic-bezier(.22,1,.36,1)}95.8%{transform:translateX(0);opacity:1;animation-timing-function:linear}100%{transform:translateX(0);opacity:1}} @keyframes v5_cycle-c6mark{0%{transform:translate(0,0) scale(1);opacity:1;animation-timing-function:linear}76.0714%{transform:translate(0,0) scale(1);opacity:1;animation-timing-function:ease-in}79.4714%{transform:translate(0,0) scale(1);opacity:1;animation-timing-function:linear}80.6714%{transform:translate(0,0) scale(.2);opacity:0;animation-timing-function:linear}82.4714%{transform:translate(9.5px,9px) scale(.2);opacity:0;animation-timing-function:cubic-bezier(.34,1.56,.64,1)}85.6714%{transform:translate(9.5px,9px) scale(1);opacity:1;animation-timing-function:linear}91%{transform:translate(9.5px,9px) scale(1);opacity:1;animation-timing-function:cubic-bezier(.22,1,.36,1)}95.8%{transform:translate(0,0) scale(1);opacity:1;animation-timing-function:linear}100%{transform:translate(0,0) scale(1);opacity:1}} @keyframes v5_cycle-c6up{0%{transform:translateY(4px) scale(.5);opacity:0;animation-timing-function:linear}76.0714%{transform:translateY(4px) scale(.5);opacity:0;animation-timing-function:linear}82.0714%{transform:translateY(4px) scale(.5);opacity:0;animation-timing-function:cubic-bezier(.34,1.56,.64,1)}85.4714%{transform:translateY(0) scale(1);opacity:1;animation-timing-function:linear}91%{transform:translateY(0) scale(1);opacity:1;animation-timing-function:cubic-bezier(.22,1,.36,1)}95.8%{transform:translateY(4px) scale(.5);opacity:0;animation-timing-function:linear}100%{transform:translateY(4px) scale(.5);opacity:0}} /* 出現フックは2通り両方書く（片方だけだと動かない） */ .fl_a-wrap.in .v5_cycle-c1chk,.in .fl_a-wrap .v5_cycle-c1chk{animation:v5_cycle-c1chk 12.599999999999998s linear infinite} .fl_a-wrap.in .v5_cycle-c1ring,.in .fl_a-wrap .v5_cycle-c1ring{animation:v5_cycle-c1ring 12.599999999999998s linear infinite} .fl_a-wrap.in .v5_cycle-c1mid,.in .fl_a-wrap .v5_cycle-c1mid{animation:v5_cycle-c1mid 12.599999999999998s linear infinite} .fl_a-wrap.in .v5_cycle-c1in,.in .fl_a-wrap .v5_cycle-c1in{animation:v5_cycle-c1in 12.599999999999998s linear infinite} .fl_a-wrap.in .v5_cycle-c1dart,.in .fl_a-wrap .v5_cycle-c1dart{animation:v5_cycle-c1dart 12.599999999999998s linear infinite} .fl_a-wrap.in .v5_cycle-c1hit,.in .fl_a-wrap .v5_cycle-c1hit{animation:v5_cycle-c1hit 12.599999999999998s linear infinite} .fl_a-wrap.in .v5_cycle-c1rip,.in .fl_a-wrap .v5_cycle-c1rip{animation:v5_cycle-c1rip 12.599999999999998s linear infinite} .fl_a-wrap.in .v5_cycle-c2back,.in .fl_a-wrap .v5_cycle-c2back{animation:v5_cycle-c2back 12.599999999999998s linear infinite} .fl_a-wrap.in .v5_cycle-c2front,.in .fl_a-wrap .v5_cycle-c2front{animation:v5_cycle-c2front 12.599999999999998s linear infinite} .fl_a-wrap.in .v5_cycle-c2bar,.in .fl_a-wrap .v5_cycle-c2bar{animation:v5_cycle-c2bar 12.599999999999998s linear infinite} .fl_a-wrap.in .v5_cycle-c2badge,.in .fl_a-wrap .v5_cycle-c2badge{animation:v5_cycle-c2badge 12.599999999999998s linear infinite} .fl_a-wrap.in .v5_cycle-c2tick,.in .fl_a-wrap .v5_cycle-c2tick{animation:v5_cycle-c2tick 12.599999999999998s linear infinite} .fl_a-wrap.in .v5_cycle-c3play,.in .fl_a-wrap .v5_cycle-c3play{animation:v5_cycle-c3play 12.599999999999998s linear infinite} .fl_a-wrap.in .v5_cycle-c3badge,.in .fl_a-wrap .v5_cycle-c3badge{animation:v5_cycle-c3badge 12.599999999999998s linear infinite} .fl_a-wrap.in .v5_cycle-c3dot,.in .fl_a-wrap .v5_cycle-c3dot{animation:v5_cycle-c3dot 12.599999999999998s linear infinite} .fl_a-wrap.in .v5_cycle-c3r1,.in .fl_a-wrap .v5_cycle-c3r1{animation:v5_cycle-c3r1 12.599999999999998s linear infinite} .fl_a-wrap.in .v5_cycle-c3r2,.in .fl_a-wrap .v5_cycle-c3r2{animation:v5_cycle-c3r2 12.599999999999998s linear infinite} .fl_a-wrap.in .v5_cycle-c3r3,.in .fl_a-wrap .v5_cycle-c3r3{animation:v5_cycle-c3r3 12.599999999999998s linear infinite} .fl_a-wrap.in .v5_cycle-c4horn,.in .fl_a-wrap .v5_cycle-c4horn{animation:v5_cycle-c4horn 12.599999999999998s linear infinite} .fl_a-wrap.in .v5_cycle-c4chk,.in .fl_a-wrap .v5_cycle-c4chk{animation:v5_cycle-c4chk 12.599999999999998s linear infinite} .fl_a-wrap.in .v5_cycle-c4tick,.in .fl_a-wrap .v5_cycle-c4tick{animation:v5_cycle-c4tick 12.599999999999998s linear infinite} .fl_a-wrap.in .v5_cycle-c4w1,.in .fl_a-wrap .v5_cycle-c4w1{animation:v5_cycle-c4w1 12.599999999999998s linear infinite} .fl_a-wrap.in .v5_cycle-c4w2,.in .fl_a-wrap .v5_cycle-c4w2{animation:v5_cycle-c4w2 12.599999999999998s linear infinite} .fl_a-wrap.in .v5_cycle-c4w3,.in .fl_a-wrap .v5_cycle-c4w3{animation:v5_cycle-c4w3 12.599999999999998s linear infinite} .fl_a-wrap.in .v5_cycle-c5s1,.in .fl_a-wrap .v5_cycle-c5s1{animation:v5_cycle-c5s1 12.599999999999998s linear infinite} .fl_a-wrap.in .v5_cycle-c5s2,.in .fl_a-wrap .v5_cycle-c5s2{animation:v5_cycle-c5s2 12.599999999999998s linear infinite} .fl_a-wrap.in .v5_cycle-c5b1,.in .fl_a-wrap .v5_cycle-c5b1{animation:v5_cycle-c5b1 12.599999999999998s linear infinite} .fl_a-wrap.in .v5_cycle-c5b2,.in .fl_a-wrap .v5_cycle-c5b2{animation:v5_cycle-c5b2 12.599999999999998s linear infinite} .fl_a-wrap.in .v5_cycle-c5b3,.in .fl_a-wrap .v5_cycle-c5b3{animation:v5_cycle-c5b3 12.599999999999998s linear infinite} .fl_a-wrap.in .v5_cycle-c5spark,.in .fl_a-wrap .v5_cycle-c5spark{animation:v5_cycle-c5spark 12.599999999999998s linear infinite} .fl_a-wrap.in .v5_cycle-c6ring,.in .fl_a-wrap .v5_cycle-c6ring{animation:v5_cycle-c6ring 12.599999999999998s linear infinite} .fl_a-wrap.in .v5_cycle-c6days,.in .fl_a-wrap .v5_cycle-c6days{animation:v5_cycle-c6days 12.599999999999998s linear infinite} .fl_a-wrap.in .v5_cycle-c6mark,.in .fl_a-wrap .v5_cycle-c6mark{animation:v5_cycle-c6mark 12.599999999999998s linear infinite} .fl_a-wrap.in .v5_cycle-c6up,.in .fl_a-wrap .v5_cycle-c6up{animation:v5_cycle-c6up 12.599999999999998s linear infinite} @media(prefers-reduced-motion:reduce){ .fl_a-wrap [class*="v5_cycle-"]{animation:none!important} } /* 🔴 大カードの図中テキストも SVG で 8.5〜9px になっていた（375pxで実測）。HTMLに出して11px以上に。 */ .rbig-sv{position:relative;display:block;line-height:0} .rbig-sv>svg{display:block} .rbig-l{position:absolute;font-family:"Hiragino Sans",sans-serif;font-size:11px;font-weight:700; line-height:1;white-space:nowrap;pointer-events:none;letter-spacing:.02em; transform:translate(-50%,-50%)} /* ① viewBox 210x96 */ .rbig-l-mcn{left:50%;top:11.98%;color:#fff;background:#111215;padding:1px 6px;border-radius:99px} /* ② viewBox 230x96 */ .rbig-l-own{left:16.09%;top:21.88%;color:var(--c-text)} .rbig-l-mkt{left:83.91%;top:21.88%;color:var(--c-text)} .rbig-l-db{left:50%;top:80.73%;color:#25F4EE;background:#111215;padding:1px 5px;border-radius:3px} /* ══ 2026-09-07 江崎さんFB ══════════════════════════════ */ /* ① FVの左端がヘッダーのロゴと136pxズレていた件。 🔴 FVを1008pxに縮めたら左カラムが432pxまで狭まり、H1が3行に折り返して読みづらくなった（実測）。 FVの広さは元に戻し、代わりに「ヘッダーのロゴと右ナビ」をFVの内側の端に合わせる。 */ @media(min-width:1200px){ .hd .wrap{max-width:1280px} } @media(min-width:1500px){ .hd .wrap{max-width:1380px} } /* ② 円環を回る丸が速すぎる → 9s から 15s へ（1.67倍ゆっくり） */ .v3_b1-adot{--v3_b1-a:v3_b1dotx 26s linear 0s infinite} .v3_b1-ar2 .v3_b1-adot{--v3_b1-a:v3_b1doty 26s linear 1.8s infinite} .v3_b1-ar3 .v3_b1-adot{--v3_b1-a:v3_b1dotxr 26s linear 3.6s infinite} .v3_b1-ar4 .v3_b1-adot{--v3_b1-a:v3_b1dotyr 26s linear 5.4s infinite} /* ③ REPORTのクリップボードが、短い項目の右に大きく空いて見える → 内容幅に詰める */ .rep-board{width:max-content;max-width:100%;margin-inline:0} @media(max-width:820px){.rep-board{width:auto}} /* 枠を内容幅に詰めたぶん、カード全体を中央に寄せて左寄りを解消する */ @media(min-width:821px){ #report .repcard{grid-template-columns:186px max-content;justify-content:center;gap:44px} } /* ④ 04 DATA「分析内容」タブ：ゲーム風に見えるので動きを弱める（2026-09-07 江崎さん指示） 118要素・21種類が同時に動いていた。走査線・発光・イコライザーなど「派手さ」を担っていたものを止め、 意味のある動き（行の点灯・図の描画・数字のカウントアップ）だけ残す。 */ .ds_a-p3 [class*="v4_data_p3-"]{ animation-name:none !important; } /* 残すもの：行が順に灯る／図が描かれる／10のカウントアップ。速度も落ち着かせる */ .ds_a-p3 .v4_data_p3-row, .ds_a-p3 [class*="v4_data_p3-"][class*="row"]{animation-name:v4dp3-row !important;animation-duration:1.1s !important} .ds_a-p3 .v4_data_p3-num, .ds_a-p3 [class*="v4_data_p3-num"]{animation-name:v4dp3-count !important} .ds_a-p3 [class*="v4_data_p3-"][class*="draw"]{animation-name:v4dp3-draw !important;animation-duration:1.4s !important} /* 走査線・光の帯・イコライザーの脈打ちは完全に止める */ .ds_a-p3 [class*="beam"],.ds_a-p3 [class*="halo"],.ds_a-p3 [class*="beat"], .ds_a-p3 [class*="tick"],.ds_a-p3 [class*="caret"]{animation:none !important;opacity:1 !important} /* 発光（box-shadow / drop-shadow）を落とす */ .ds_a-p3 [class*="v4_data_p3-"]{filter:none !important} /* ⑤ 07 CHOOSE：図と動きが多くて「うるさい・ごちゃごちゃ」（2026-09-07 江崎さん指示） svg8個・部品155個・動く要素56 だった。動きは各カード1〜2個に絞り、補助要素（点線・×・矢印）を薄くする。 */ .v4_choose-wrap [class*="v4_choose-"]{animation-name:none !important; opacity:1 !important;transform:none !important; stroke-dashoffset:0 !important;stroke-dasharray:none !important} /* 残すのは「結果が出る」動きだけ（チェック・選ばれた対象のポップ） */ .v4_choose-wrap [class*="chk"],.v4_choose-wrap [class*="check"], .v4_choose-wrap [class*="ok"],.v4_choose-wrap [class*="pick"]{ animation-name:v4c-keep !important;animation-duration:2.4s !important; animation-timing-function:cubic-bezier(.34,1.56,.64,1) !important;animation-iteration-count:infinite !important} @keyframes v4c-keep{0%,18%{opacity:.25;transform:scale(.9)}32%,76%{opacity:1;transform:scale(1)}90%,100%{opacity:.25;transform:scale(.9)}} /* 補助要素（点線・×・矢印・破線ボックス）を薄くして主役を立てる */ .v4_choose-wrap [stroke-dasharray], .v4_choose-wrap [class*="dash"],.v4_choose-wrap [class*="cross"], .v4_choose-wrap [class*="arrow"],.v4_choose-wrap [class*="ng"]{opacity:.42} /* 図をわずかに小さくして、設問テキストとの主従を整える */ @media(min-width:900px){ .v4_choose-hd [class*="v4_choose"] svg,.v4_choose-hd svg{width:104px !important} } .v4_choose-wrap [class*="v4_choose-"]{filter:none !important} /* 🔴 768〜900px の帯域だけ FV が窮屈だった（2026-09-07 江崎さん「つめつめ」） 実測：左カラムが320〜420pxしかないのに H1 が54pxのままで、3行に折り返していた。 右の電話が380px固定で場所を取っているのが主因。この帯域だけ見出しを詰め、電話を縮める。 */ @media(min-width:768px) and (max-width:900px){ .fv-hero .hero-grid{grid-template-columns:1fr 300px;gap:32px} .fv-hero h1{font-size:40px;letter-spacing:-.01em} .fv-hero .sub{font-size:14px} .fv-hero .h1sub{font-size:16px} .stage{min-height:0} .phone{transform:scale(.82)} .fv-hero{padding:44px 0 48px} /* 電話を縮めたぶん SOLD が商品カードに被る（実測で交差153x59px）。電話の下端の下へ逃がす */ .xsold.v5_fvsold-wrap,.xsold{bottom:-160px} } @media(min-width:768px) and (max-width:840px){ .xsold.v5_fvsold-wrap,.xsold{bottom:-190px} } /* 🔴 FVの左右バランス（2026-09-07 江崎さん「右側の方が空白が多い」） 実測：右カラムの枠は480pxだが電話の実描画は374px。106pxの余りがそのまま右の空白になり、 左の余白126px に対して右が245px（差119px）になっていた。枠を電話の実幅に合わせて余りを消す。 */ @media(min-width:1200px){ .fv-hero .hero-grid{grid-template-columns:1fr 380px} /* 電話は右カラムの中で中央に置かれるため、実測で右に69pxぶん余る。 左カラムを同じだけ内側へ寄せて、左右の余白を揃える（実測で差0px・H1は1行のまま）。 */ .fv-hero .hero-grid>div:first-child{padding-left:69px} /* ロゴもFVのテキストと同じ位置に揃える（左カラムを寄せたぶん） */ .hd .wrap{padding-left:calc(16px + 69px)} } /* ── HubSpotフォームの見た目を LP に合わせる（2026-09-07 実装） .sec-dark（黒地）の上に載るので、ラベルは白・入力欄は白地・ボタンはLPのCTAと同じ赤にする。 */ .hsform{margin:0 0 14px} .hsform .hs-form-field{margin:0 0 14px} .hsform label{display:block;font-size:13px;font-weight:700;color:#fff;margin:0 0 6px;line-height:1.6} .hsform label .hs-form-required{color:#FE2C55;margin-left:3px} .hsform input[type=text],.hsform input[type=email],.hsform input[type=tel], .hsform textarea,.hsform select{ width:100%;box-sizing:border-box;font:inherit;font-size:15px; padding:13px 14px;border-radius:10px;border:1px solid #3a3c40; background:#fff;color:#111215;line-height:1.6} .hsform textarea{min-height:96px;resize:vertical} .hsform input::placeholder,.hsform textarea::placeholder{color:#65686d} .hsform input:focus,.hsform textarea:focus,.hsform select:focus{ outline:none;border-color:#FE2C55;box-shadow:0 0 0 3px rgba(254,44,85,.25)} .hsform .hs-button,.hsform input[type=submit]{ display:block;width:100%;box-sizing:border-box;font:inherit;font-size:17px;font-weight:800; padding:16px 20px;border:0;border-radius:12px;background:var(--c-cta);color:#fff;cursor:pointer; margin:6px 0 0;letter-spacing:.02em} .hsform .hs-button:hover,.hsform input[type=submit]:hover{background:#c81b40} .hsform .hs-error-msg,.hsform .hs-error-msgs label{color:#F0AFC0;font-size:12.5px;font-weight:700} .hsform .hs-richtext,.hsform .legal-consent-container{color:var(--c-on-dark-sub);font-size:12px;line-height:1.8} .hsform .hs-richtext a,.hsform .legal-consent-container a{color:#25F4EE} .hsform .submitted-message{color:#fff;font-size:15px;line-height:1.9} @media(max-width:560px){ .hsform input[type=text],.hsform input[type=email],.hsform textarea{font-size:16px} /* iOSの自動ズーム防止 */ } /* HubSpotフォームは iframe で描画されるため中のCSSは当てられない。 外側の箱を白にして「白いカードの中にフォームがある」形に整え、浮いて見えないようにする。 */ #contact .formbox{background:#fff;border-radius:16px;padding:26px 24px 22px; max-width:640px;margin-inline:auto;box-shadow:0 8px 30px rgba(0,0,0,.28)} /* 箱が白くなったので、中の注記は暗い文字に戻す */ #contact .formbox .cform-after{background:#eef1f5;color:#3a3c40;border-radius:10px; padding:12px 14px;font-size:12.5px;line-height:1.85;margin:14px 0 0} #contact .formbox .cform-after b{color:#111215} #contact .formbox .cform-legal{color:#65686d;font-size:11.5px;line-height:1.8;margin:12px 0 0} #contact .formbox .cform-legal a{color:#B01D36} #contact .formbox .fallback{color:#65686d;font-size:12.5px;line-height:1.9;margin:12px 0 0} #contact .formbox .fallback a{color:#B01D36} @media(max-width:560px){#contact .formbox{padding:18px 14px 16px}} /* ===== お問い合わせフォーム（自前実装・2026-09-07）===== HubSpotの埋め込みiframeから移行した。無料プランではiframe内のボタン色・角丸が変えられず （クリックするとアップグレード画面が出る）、「貴社もフォームを無料で作成…」の宣伝行も消せなかった。 送信先は HubSpot Forms API なので、HubSpot側に届く中身は従来と同じ。 */ #contact .formbox .cform{gap:14px;margin:0} .cf-f{margin:0} .cform label{display:block;font-size:12.5px;font-weight:700;color:#111215;letter-spacing:.01em} .cf-req,.cf-any{display:inline-block;margin-left:6px;font-size:10.5px;font-weight:700; letter-spacing:.06em;border-radius:3px;padding:2px 6px;vertical-align:1px} .cf-req{background:#FDEBEF;color:#B01D36} .cf-any{background:#eef1f5;color:#65686d} .cform input[type=text],.cform input[type=email],.cform input[type=tel],.cform textarea{ display:block;width:100%;margin-top:7px;background:#fff;border:1px solid #c2c5cb; border-radius:8px;padding:12px 13px;color:#111215;font-size:16px;font-family:inherit; line-height:1.6;transition:border-color .15s,box-shadow .15s} .cform textarea{resize:vertical;min-height:96px} .cform input:focus,.cform textarea:focus{outline:0;border-color:#E11D48; box-shadow:0 0 0 3px rgba(225,29,72,.16)} .cform input.is-bad,.cform textarea.is-bad{border-color:#C2203A;background:#fff7f9} /* 同意チェック */ .cf-check{display:flex !important;align-items:flex-start;gap:9px;font-size:13px !important; font-weight:400 !important;line-height:1.7;color:#3a3c40 !important;cursor:pointer;margin:0} .cf-check input{flex:0 0 18px;width:18px;height:18px;margin:2px 0 0;accent-color:#E11D48;cursor:pointer} /* ハニーポット（人には見えない。ボットが埋めたら送信しない） 🔴 left:-9999px は使わない。lp_visual_gate.py の横溢れ検査（V7）に引っかかる。 視覚的非表示の定型（clip）で、レイアウトの外に出さずに隠す。 */ #contact .formbox .cform{position:relative} .cf-hp{position:absolute;width:1px;height:1px;margin:-1px;padding:0;border:0; overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap} /* 送信状態の通知 */ .cf-alert{margin:0;padding:11px 13px;border-radius:8px;font-size:13.5px;line-height:1.7} .cf-alert.is-bad{background:#FDEBEF;color:#B01D36;border:1px solid #F0AFC0} .cf-alert.is-busy{background:#eef1f5;color:#3a3c40;border:1px solid #dcdfe4} #contact .formbox .cform .btn{width:100%;min-height:56px;font-size:17px;margin-top:2px} #contact .formbox .cform .btn:disabled{opacity:.6;cursor:default;transform:none} #contact .formbox .fnote{margin:0;font-size:11.5px;line-height:1.8;color:#65686d} #contact .formbox .fnote a{color:#B01D36} #contact .formbox .cform-after{margin:0 0 18px} @media(max-width:560px){ .cf-check{font-size:12.5px !important} } /* ===== 診断の設問（タップで選ぶ。前LPはラジオの縦並びだったのを、指で押せる大きさに） ===== */ .cf-q{border:0;margin:0;padding:0;min-width:0} .cf-q legend{padding:0;font-size:12.5px;font-weight:700;color:#111215;letter-spacing:.01em} .cf-opts{display:flex;flex-wrap:wrap;gap:8px;margin-top:9px} .cf-pill{position:relative;margin:0} .cf-pill input{position:absolute;opacity:0;width:0;height:0} .cf-pill span{display:block;padding:9px 14px;border:1px solid #c2c5cb;border-radius:999px; background:#fff;color:#3a3c40;font-size:13.5px;font-weight:400;line-height:1.5; cursor:pointer;transition:border-color .15s,background .15s,color .15s} .cf-pill:hover span{border-color:#F0AFC0} .cf-pill input:checked+span{background:#FDEBEF;border-color:#E11D48;color:#B01D36;font-weight:700} .cf-pill input:focus-visible+span{outline:2px solid #E11D48;outline-offset:2px} .cf-sep{border:0;border-top:1px solid #dcdfe4;margin:4px 0 2px} @media(max-width:560px){ .cf-pill span{padding:9px 13px;font-size:13px} .cf-opts{gap:7px} } /* 「その他」を選んだときに出る記入欄 🔴 著者スタイルの display:block はUA既定の [hidden]{display:none} を上書きするので、 hidden を明示的に効かせる1行が要る（これが無いと常時表示になる） */ .cf-other[hidden]{display:none !important} .cf-other{display:block;width:100%;margin-top:10px;background:#fff;border:1px solid #c2c5cb; border-radius:8px;padding:11px 13px;color:#111215;font-size:16px;font-family:inherit;line-height:1.6; transition:border-color .15s,box-shadow .15s} .cf-other:focus{outline:0;border-color:#E11D48;box-shadow:0 0 0 3px rgba(225,29,72,.16)} .cf-other::placeholder{color:#8a8f98}