/* ===================================================================== SNSHUB — 提案資料デッキ（横スライド／ページ送り） LPの style.css（配色・フォント・コンポーネント）を読み込んだ上に、 このファイルで「16:9スライド枠・ヘッダー・ナビ・再生モード」を被せます。 スライド本体は 1280×720 の固定キャンバスで作り、画面幅に合わせて拡大縮小します。 ===================================================================== */ :root { --deck-w: 1280; /* キャンバス設計幅 */ --deck-h: 720; /* キャンバス設計高 */ --bar-h: 60px; /* 上部バー高 */ /* 登場演出用のやわらかいイージング（“フワッと”着地する減速カーブ）*/ --ease-soft: cubic-bezier(.21,.7,.27,1); /* 影を少し深め・寒色寄りにして、カードの浮き＝立体感を強める（のっぺり感の解消）*/ --shadow-sm: 0 2px 12px rgba(16,30,62,.07); --shadow: 0 18px 46px rgba(16,30,62,.14); --shadow-lg: 0 40px 88px rgba(16,30,62,.22); } /* ===== デザインの質感調整（奥行き・透明感） =================================== 白いカードがフラットに見えないよう、ごく淡い縦グラデと締まる枠線で質感を出す。 明るいスライド枠はすりガラス感を少し強めて高級感を出す。 */ .slide__canvas .daycard--manual, .slide__canvas .compare-card:not(.compare-card--pos), .slide__canvas .vs-card:not(.vs-card--pos), .slide__canvas .kw-box, .slide__canvas .solve-box--light, .slide__canvas .ig-post:not(.ig-post--pro) { background: linear-gradient(180deg, #ffffff 0%, #f3f8fd 100%); border: 1px solid rgba(150,178,212,.34); } /* プロレベルの投稿は「濃紺カード＋明るい文字」で素人投稿(白)と対比させる意図。 上の白グラデ装飾から除外し、濃紺背景・明るい文字をしっかり効かせて視認性を確保。 */ .slide__canvas .ig-post--pro { background: #e4f3fc; border: 1.5px solid var(--c-accent); color: var(--c-ink); } .slide__canvas .ig-post--pro .ig-post__bar { color: var(--c-accent); } .slide__canvas .ig-post--pro .ig-post__txt { color: var(--c-ink); } .slide__canvas .ig-post--pro .ig-post__txt .muted { color: var(--c-muted); } /* アクセント(水色)カードは透明感のある淡グラデで、のっぺり単色を回避 */ .slide__canvas .vs-card--pos, .slide__canvas .compare-card--pos, .slide__canvas .ba-card--after { background: linear-gradient(180deg, rgba(230,244,252,.95) 0%, rgba(208,233,250,.92) 100%); } /* 明るいスライド枠：資料カード自体に地色グラデを乗せる（後ろ＝白、資料＝グラデ）。 外側の背景は白なので、グラデはカード内に閉じて見える。 */ .slide__frame:not(.is-dark) { background: radial-gradient(135% 120% at 88% -10%, #e2edf8 0%, rgba(226,237,248,0) 58%), radial-gradient(120% 115% at 4% 110%, #e7eff9 0%, rgba(231,239,249,0) 60%), radial-gradient(100% 80% at 50% 38%, #ffffff 0%, rgba(255,255,255,0) 64%), linear-gradient(168deg, #f1f6fc 0%, #f7fafe 50%, #eff5fb 100%); } html, body { height: 100%; } body { /* 立体感のある地色：中央を明るく持ち上げ、左右の角に寒色のグラデを効かせて のっぺり感を解消。斜めのベースグラデで奥行きを出す。 */ background: #ffffff; background-attachment: fixed; overflow: hidden; /* 全体スクロールは .deck 側で制御 */ } /* ===== 上部バー ===== */ .deckbar { position: fixed; inset: 0 0 auto 0; z-index: 50; height: var(--bar-h); display: flex; align-items: center; gap: 14px; padding: 0 clamp(16px, 3vw, 28px); background: rgba(255,255,255,.82); backdrop-filter: blur(14px); border-bottom: 1px solid var(--c-line-soft); } .deckbar__brand { display: flex; align-items: center; gap: 9px; font-weight: 800; font-size: 16px; color: var(--c-ink); letter-spacing: .02em; } .deckbar__title { font-size: 14px; font-weight: 700; color: var(--c-ink); } .deckbar__count { font-size: 12.5px; color: var(--c-muted); font-weight: 500; } .deckbar__spacer { flex: 1; } .deckbar__play { display: inline-flex; align-items: center; gap: 8px; background: var(--c-accent); color: #fff; border: none; cursor: pointer; padding: 9px 18px; border-radius: var(--radius-pill); font-weight: 700; font-size: 13.5px; font-family: inherit; box-shadow: 0 6px 16px rgba(14,156,224,.30); transition: background .2s, transform .15s; } .deckbar__play:hover { background: var(--c-accent-deep); transform: translateY(-1px); } .deckbar__play svg { width: 14px; height: 14px; fill: currentColor; } /* ===== スクロール領域（閲覧モード）===== */ .deck { position: absolute; inset: var(--bar-h) 0 0 0; overflow-y: auto; overflow-x: hidden; scroll-snap-type: y mandatory; scroll-behavior: smooth; padding: 24px 0 90px; -webkit-overflow-scrolling: touch; } /* ===== 1枚のスライド（カードを中央に置く）===== */ .slide { scroll-snap-align: center; scroll-snap-stop: always; /* 閲覧モードは縦中央。枠は「画面の幅と高さの両方に収まる最大の16:9」なので、 中央に置けば上下の余白がほぼ均等になり、資料が上に寄って見えない。 */ display: flex; align-items: center; justify-content: center; padding: 18px clamp(16px, 4vw, 48px); min-height: calc(100vh - var(--bar-h)); } .slide__frame { position: relative; /* ブレークポイントで切り替えるのではなく、ウィンドウサイズに連続追従して拡大縮小する。 画面の「幅」と「高さ」の両方に収まる最大の 16:9 を常に採用する： ・高さ基準の幅 = 利用可能な高さ × 16/9 ・幅基準の幅 = 100%（横の余白を除いた幅） その小さい方を取るので、どんな画面比でも枠がはみ出さず、なめらかにサイズが変わる。 大画面でも枠が小さいまま余白だらけにならない（上限は 1600px）。 */ width: min(100%, calc((100vh - var(--bar-h) - 48px) * 16 / 9)); max-width: 1600px; aspect-ratio: 16 / 9; border-radius: 0; /* 資料の角は四角（全ページ共通） */ /* 真っ白ではなく約78%の半透明（わずかに寒色寄り）。背後のグラデが透けて透明感が出る */ background: rgba(253,254,255,.78); backdrop-filter: blur(12px) saturate(1.06); -webkit-backdrop-filter: blur(12px) saturate(1.06); box-shadow: var(--shadow-lg); overflow: hidden; /* Safari等で transform 付きキャンバス内の絶対配置要素（秘書イラスト等）が overflow:hidden をすり抜けて枠外へはみ出すのを確実に防ぐ */ clip-path: inset(0); border: 1px solid rgba(255,255,255,.6); } /* 実際の中身：設計サイズ固定 → JSでscale */ .slide__canvas { position: absolute; top: 0; left: 0; z-index: 1; width: 1280px; height: 720px; transform-origin: top left; transform: scale(var(--scale, 1)); display: flex; flex-direction: column; padding: 34px 68px; overflow: hidden; } /* ===== スライド内・共通の見出し系（固定キャンバス用にサイズ調整）===== */ .slide__canvas .eyebrow { font-size: 15px; margin-bottom: 10px; } .slide__canvas .section__title { font-size: 38px; line-height: 1.16; margin-bottom: 0; } /* 小見出し（カード内などの見出し）も行間を少し詰める。本文(p)は対象外。 */ .slide__canvas h3, .slide__canvas h4, .slide__canvas .axis-head h3 { line-height: 1.2; } .slide__canvas .section__title--sm { font-size: 38px; } .slide__canvas .section__note, .slide__canvas .section__lead { font-size: 16px; margin-top: 14px; } .s-head { flex: 0 0 auto; margin-bottom: 22px; } .s-body { flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; justify-content: center; } .s-foot { flex: 0 0 auto; } .slide__canvas .source { margin-top: 14px; } /* 旧・装飾サークルは廃止し、斜めのアクセント帯（下記 ::before/::after）に置き換え */ .slide__bg { display: none; } .slide__canvas > * { position: relative; z-index: 1; } /* === 背景装飾：光のグラデーション（丸の代わり）=== 右上から淡くにじむ単色グラデ（形なし）。本文に干渉せず上品な奥行きを出す。 .slide__frame（overflow:hidden）の角でクリップされる。 ::before は枠自体に付くので登場アニメ(transform)の影響を受けない。 */ .slide__frame::before { content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none; background: radial-gradient(120% 90% at 100% 0%, rgba(14,156,224,.10), transparent 58%), radial-gradient(100% 85% at 0% 100%, rgba(99,130,200,.05), transparent 60%); } .slide__frame.is-dark::before { background: radial-gradient(120% 90% at 100% 0%, rgba(127,208,240,.14), transparent 58%), radial-gradient(100% 85% at 0% 100%, rgba(255,255,255,.04), transparent 60%); } .slide__frame.is-soft::before { background: radial-gradient(120% 90% at 100% 0%, rgba(14,156,224,.09), transparent 58%), radial-gradient(100% 85% at 0% 100%, rgba(99,130,200,.05), transparent 60%); } /* === 背景装飾②：ドットグリッド（グラデーションと併用）=== 右上に淡いドットを敷き、放射状マスクでフェードアウトさせる。 */ .slide__frame::after { content: ""; position: absolute; z-index: 0; pointer-events: none; top: 0; right: 0; width: 52%; height: 78%; background-image: radial-gradient(rgba(14,156,224,.13) 1.2px, transparent 1.7px); background-size: 18px 18px; -webkit-mask-image: radial-gradient(130% 130% at 100% 0%, #000 14%, transparent 64%); mask-image: radial-gradient(130% 130% at 100% 0%, #000 14%, transparent 64%); } .slide__frame.is-dark::after { background-image: radial-gradient(rgba(127,208,240,.18) 1.2px, transparent 1.7px); } /* このページは水玉（ドットグリッド）を出さない（PC・スマホ共通）*/ .slide__frame.no-dots::after { display: none; } /* ページ番号（カード右下） */ .slide__pageno { position: absolute; right: 24px; bottom: 16px; top: auto; z-index: 3; font-size: 12px; font-weight: 700; color: var(--c-accent); letter-spacing: .06em; } /* ダーク／ソフト／LINE系スライドの下地（LPのセクション色を踏襲） */ .slide__frame.is-dark { background: var(--c-dark); } .slide__frame.is-dark .section__title, .slide__frame.is-dark .slide__pageno { color: #fff; } .slide__frame.is-dark .eyebrow { color: var(--c-accent-light); } .slide__frame.is-dark .body-text, .slide__frame.is-dark .section__lead { color: rgba(255,255,255,.82); } /* is-soft も非ダーク共通の背景（薄い青グラデ）に統一 */ /* ===== 下部ナビ（前へ / ドット / 次へ ＋ ページ）===== */ .deck-nav { position: fixed; left: 50%; bottom: 18px; z-index: 60; transform: translateX(-50%); display: flex; align-items: center; gap: 10px; padding: 5px 9px; background: rgba(255,255,255,.9); backdrop-filter: blur(12px); border: 1px solid var(--c-line-soft); border-radius: var(--radius-pill); box-shadow: var(--shadow); } .deck-nav__btn { width: 27px; height: 27px; border-radius: 50%; border: none; cursor: pointer; background: var(--c-accent-soft); color: var(--c-accent-deep); display: inline-flex; align-items: center; justify-content: center; transition: background .2s, transform .15s; } .deck-nav__btn:hover { background: var(--c-accent); color: #fff; } .deck-nav__btn:disabled { opacity: .35; cursor: default; background: var(--c-bg-soft); color: var(--c-muted); } .deck-nav__btn svg { width: 13px; height: 13px; fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; } .deck-nav__dots { display: flex; align-items: center; gap: 6px; max-width: 46vw; overflow: hidden; } .deck-nav__dot { width: 6px; height: 6px; border-radius: 50%; border: none; padding: 0; background: var(--c-line-soft); cursor: pointer; transition: background .2s, transform .2s; } .deck-nav__dot.is-active { background: var(--c-accent); transform: scale(1.35); } .deck-nav__page { font-size: 12px; font-weight: 700; color: var(--c-ink); min-width: 44px; text-align: center; } .deck-nav__page b { color: var(--c-accent); } /* ===== 再生（フルスクリーン）モード ===== */ /* 再生時も通常閲覧と同じ明るい地色に。枠は半透明なので、地色が暗いと スライド全体に暗いフィルタがかかったように透けてしまう（=暗く見える）。 */ body.is-playing { background: #ffffff; } body.is-playing .deckbar { opacity: 0; pointer-events: none; } /* 全画面化されるのは .deck 自体。body の地色は全画面中は描画されないため、 グラデを .deck にも持たせないと、16:9カードの下の余白が黒い ::backdrop に なってしまう（=「下が黒い」状態）。::backdrop も保険でグラデにする。 */ body.is-playing .deck { background: #ffffff; inset: 0; scroll-snap-type: x mandatory; scroll-behavior: smooth; display: flex; flex-direction: row; overflow-x: auto; overflow-y: hidden; padding: 0; } body.is-playing .slide { min-width: 100vw; min-height: 100vh; height: 100vh; scroll-snap-align: center; padding: 0; } /* 再生モードでも枠は「画面の幅と高さの両方に収まる最大の16:9カード」にする。 閲覧モードと同じく、四角・影付きでグラデ背景の上に少し余白を持って浮かせる。 余白(slideのpadding)分を差し引いた最大16:9を採用するので、上下左右に グラデ地色が見え、ダークスライドでも地色が間延びしない。 */ /* 再生は「画面に余白を残して中央に浮かせた16:9カード」。上下左右に余白分 (--play-pad)を引いた最大の16:9を採用するので、左右にもグラデ地色が見え、 閲覧モードと同じく影付きカードが背景に浮く。角は四角のまま。 */ body.is-playing .slide__frame { --play-pad: clamp(20px, 3.4vw, 60px); width: min( calc(100vw - var(--play-pad) * 2), calc((100vh - var(--play-pad) * 2) * 16 / 9) ); height: auto; max-width: none; aspect-ratio: 16 / 9; border-radius: 0; border: none; box-shadow: var(--shadow-lg); } /* 再生時のキャンバスは閲覧時と同じ機構（absolute＋top-left、scale=枠幅/1280）で 16:9 の枠をぴったり充填する。 */ body.is-playing .slide__canvas { position: absolute; top: 0; left: 0; transform-origin: top left; } /* スライド(100vh)内で枠カードを中央に。上下左右の余白に地色グラデが見え、 影付きカードがグラデ背景に浮く（閲覧モードと同じ見た目）。 下側は下部ナビと重ならないよう少し広めに取る。 */ body.is-playing .slide { align-items: center; justify-content: center; padding: 0; /* 全画面表示：余白なしで中央いっぱいに */ } /* 再生（全画面）時、枠が全画面に広がるため半透明（78%）だと地色がスライド全体に 透けて灰色っぽく沈む。明るいスライドは枠を不透明にして通常閲覧と同じ明るさに保つ。 ダークスライド(.is-dark)は元から不透明なので対象外。 */ body.is-playing .slide__frame:not(.is-dark) { background: radial-gradient(135% 120% at 88% -10%, #e2edf8 0%, rgba(226,237,248,0) 58%), radial-gradient(120% 115% at 4% 110%, #e7eff9 0%, rgba(231,239,249,0) 60%), radial-gradient(100% 80% at 50% 38%, #ffffff 0%, rgba(255,255,255,0) 64%), linear-gradient(168deg, #f1f6fc 0%, #f7fafe 50%, #eff5fb 100%); backdrop-filter: none; -webkit-backdrop-filter: none; } .deck:fullscreen::backdrop, .deck:-webkit-full-screen::backdrop { background: #ffffff; } body.is-playing .deck-nav { bottom: 26px; } .deck-exit { position: fixed; top: 18px; right: 20px; z-index: 70; display: none; align-items: center; gap: 7px; background: rgba(255,255,255,.14); color: #fff; border: 1px solid rgba(255,255,255,.25); padding: 7px 14px; border-radius: var(--radius-pill); font-size: 12.5px; font-weight: 700; cursor: pointer; font-family: inherit; backdrop-filter: blur(8px); } body.is-playing .deck-exit { display: inline-flex; } .deck-exit:hover { background: rgba(255,255,255,.24); } /* ===== 表紙スライド ===== */ .cover { justify-content: center; } .cover .s-body { justify-content: center; align-items: stretch; } /* 左にコピー・右にカレンダーモック（LPヒーローと同じ構成）。 flex＋固定幅のモック列で、コピー側がモックを押し出さないようにする */ .cover__grid { display: flex; align-items: center; gap: 56px; width: 100%; } .cover__copy { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; align-items: flex-start; } .cover__phone { flex: 0 0 286px; display: flex; align-items: center; justify-content: center; margin-right: 80px; } .cover__phone .phone { width: 286px; flex: none; } /* スマホモックのカレンダーの予定ドットを少し小さく（4px→3px）*/ .slide__canvas .cal__grid span.dot::after { width: 3px; height: 3px; bottom: 2px; } .cover__badge { display: inline-flex; align-items: center; gap: 8px; background: var(--c-accent-soft); color: var(--c-accent-deep); padding: 9px 18px; border-radius: var(--radius-pill); font-weight: 800; font-size: 15px; margin-bottom: 26px; } .cover__badge .brand-dot { width: 13px; height: 13px; border-radius: 0; } /* 「SNSHUB」のロゴ文字（角アイコン24px＋余白11px＝35px）の真下から始める */ .cover__subtitle { font-size: 16px; font-weight: 800; color: var(--c-ink); letter-spacing: .01em; margin: 0 0 22px 0; } .cover__title { font-size: 66px; line-height: 1.12; font-weight: 900; color: var(--c-ink); letter-spacing: .01em; } .cover__title .accent { color: var(--c-accent); } .cover__lead { font-size: 18px; font-weight: 700; line-height: 1.9; color: var(--c-text); margin-top: 28px; max-width: 820px; } .cover__brand-row { display: flex; align-items: center; gap: 12px; margin: 52px 0 0 0; } .cover__logo { display: flex; align-items: center; gap: 11px; font-size: 30px; font-weight: 800; color: var(--c-ink); } .cover__logo .brand-dot { width: 26px; height: 26px; border-radius: 0; } .cover__logo-img { width: 340px; height: auto; aspect-ratio: 514 / 218; display: block; } .cover__logo-text { display: block; font-size: 55px; font-weight: 900; letter-spacing: 0.02em; color: var(--c-ink); line-height: 1; } .cover__foot { position: absolute; left: 68px; bottom: 44px; font-size: 10px; color: var(--c-muted); } /* ===== レイアウトヘルパー（スライド本体用）===== */ .s-two { display: grid; grid-template-columns: 1fr 0.78fr; gap: 40px; align-items: center; height: 100%; } .s-two--media-left { grid-template-columns: 0.78fr 1fr; } .s-two__media { display: flex; align-items: center; justify-content: center; height: 100%; } .s-two .phone { transform: scale(.92); } .slide__canvas .body-text { font-size: 16px; line-height: 1.85; } .slide__canvas .subhead { font-size: 18px; margin: 14px 0 8px; } /* テーブルをキャンバスに収める */ .slide__canvas .ctable { font-size: 14.5px; } .slide__canvas .ctable th, .slide__canvas .ctable td { padding: 11px 14px; } /* メトリクスグリッドの間隔詰め */ .slide__canvas .metric-grid { gap: 16px; } .slide__canvas .steps-grid { gap: 14px; } .slide__canvas .axes-grid { gap: 18px; } /* スライド内では reveal を即表示（登場演出は下の .anim で制御）*/ .slide__canvas .reveal { opacity: 1; transform: none; } /* ===================================================================== 文字色の可読性調整 - 明るいスライド: グレー文字を黒寄りに濃く - ダークスライド: 本文テキストを白系に ===================================================================== */ .slide__frame:not(.is-dark) { --c-text: #2a2f3a; --c-muted: #4f5764; } .slide__frame.is-dark .solve-box, .slide__frame.is-dark .solve-box p, .slide__frame.is-dark .body-text { color: rgba(255,255,255,.9); } /* ===================================================================== 登場アニメーション（スライドがアクティブになると順番にふわっと出現） .anim は deck.js が付与。JSが無い/低モーション環境では常に表示。 ===================================================================== */ @media (prefers-reduced-motion: no-preference) { /* フワッと出現：やわらかいイージング・長めの尺・下からのフェードで“ふわっ”と立ち上げる。 ぼかし(blur)は目が疲れるため使わない */ .slide__canvas .anim { opacity: 0; transform: translateY(24px); transition: opacity .95s var(--ease-soft), transform .95s var(--ease-soft); will-change: opacity, transform; } .slide__canvas .anim.anim-show { opacity: 1; transform: none; } /* 見出し・表紙タイトルは少し大きめに動かして主役感を出す */ .slide__canvas .section__title.anim, .slide__canvas .cover__title.anim { transform: translateY(30px) scale(.99); } .slide__canvas .section__title.anim.anim-show, .slide__canvas .cover__title.anim.anim-show { transform: none; } /* 装飾円のゆらゆら浮遊 */ @keyframes deckFloat { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-18px); } } .slide__bg { animation: deckFloat 11s ease-in-out infinite; } .slide__bg.s-bg-2 { animation-duration: 14s; animation-direction: reverse; } /* スマホモックの浮遊アニメは停止（位置固定） */ /* 表紙カレンダー：投稿予定ドットがAIによって順番にポンッと埋まっていく演出 */ .slide__canvas .cal__grid span.dot::after { transform: scale(0); opacity: 0; transition: transform .55s var(--ease-soft), opacity .45s var(--ease-soft); } .slide__canvas .cal__grid span.dot.is-scheduled::after { transform: scale(1); opacity: 1; } /* アクティブスライドのカードがほんのり浮く（ホバー風の生き感）*/ .slide__canvas .vs-x__chip, .slide__canvas .ba-arrow__chip { animation: deckFloat 5.5s ease-in-out infinite; } /* 表紙バッジのドットを点滅 */ @keyframes brandPulse { 0%,100% { opacity: 1; } 50% { opacity: .45; } } .cover__badge .brand-dot { animation: brandPulse 2.4s ease-in-out infinite; } /* スマホ画面の中身が上下にゆらゆら動くドリフトは停止（目が疲れるため）*/ .slide__canvas .screen-flow { animation: none; } } /* ===== インサイト(11枚目)の折れ線グラフ：ペイン表示時に線が描かれる演出 ===== ui-bar の伸びるアニメ(.ui-pane.is-on …)と同じく、is-on になった瞬間に発火する */ .slide__canvas .chart__line { stroke-dasharray: 500; stroke-dashoffset: 500; } .slide__canvas .ui-pane.is-on .chart__line { stroke-dashoffset: 0; transition: stroke-dashoffset 1.2s var(--ease-soft); } .slide__canvas .ui-pane.is-on .chart__line--2 { transition-delay: .18s; } @media (prefers-reduced-motion: reduce) { /* 低モーション時は線を即座に最終状態で表示（描画アニメなし）*/ .slide__canvas .chart__line { stroke-dashoffset: 0; } } /* ===== レポート(11枚目) ハンバーガーメニューのドロワー ===== */ /* z-index は指(touch-pointer:7)・波紋(tap-fx:6)より下に置き、指がドロワーの上に見えるようにする */ .ui-drawer { position: absolute; inset: 0; z-index: 5; pointer-events: none; } .ui-drawer__scrim { position: absolute; inset: 0; background: rgba(16,24,40,.34); opacity: 0; transition: opacity .42s var(--ease-soft); } .ui-drawer__panel { position: absolute; top: 0; bottom: 0; left: 0; width: 74%; background: #ffffff; box-shadow: 8px 0 26px rgba(20,30,60,.20); border-radius: 0 18px 18px 0; padding: 16px 12px; display: flex; flex-direction: column; gap: 3px; transform: translateX(-106%); transition: transform .44s var(--ease-soft); } .ui-drawer.is-open { pointer-events: auto; } .ui-drawer.is-open .ui-drawer__scrim { opacity: 1; } .ui-drawer.is-open .ui-drawer__panel { transform: none; } .ui-drawer__brand { display: flex; align-items: center; gap: 7px; font-weight: 800; font-size: 13px; color: var(--c-ink); padding: 4px 8px 12px; margin-bottom: 4px; border-bottom: 1px solid var(--c-line-soft); } .ui-drawer__item { display: flex; align-items: center; gap: 10px; padding: 9px 10px; border-radius: 10px; font-weight: 700; font-size: 12.5px; color: var(--c-ink); transition: background .3s var(--ease-soft), color .3s var(--ease-soft); } .ui-drawer__item.is-active { background: var(--c-accent-soft); color: var(--c-accent-deep); } .ui-drawer__item--mut { color: var(--c-muted); } .ui-drawer__ic { display: inline-flex; width: 17px; height: 17px; color: currentColor; } .ui-drawer__ic svg { width: 17px; height: 17px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; } .ui-drawer__div { height: 1px; background: var(--c-line-soft); margin: 8px 6px; } /* ===== レスポンシブ（スマホ：縦スクロールで資料を順番に表示）===== */ @media (max-width: 720px) { .deckbar__title { display: none; } /* スマホ・タブレットもPCと同じく縦スクロール。資料カードを上から順に積み、 ページ送りに頼らず指で下へスクロールして読めるようにする（横スワイプは廃止）。*/ .deck { display: block; overflow-y: auto; overflow-x: hidden; scroll-snap-type: none; padding: 12px 0 80px; scrollbar-width: none; -ms-overflow-style: none; /* スクロールバーを隠す */ } .deck::-webkit-scrollbar { display: none; } .slide { min-width: 0; width: 100%; height: auto; min-height: 0; align-items: center; /* 資料を中央寄せ */ padding: 8px 12px; /* カード間に少し余白 */ scroll-snap-align: none; } /* スマホは資料の背景を単色で統一（枠の影＝グラデーション状の陰影を消す）。 枠の輪郭は細い線で確保する。 */ /* スマホもPCと同じく、地色グラデ＋枠内のグラデ／ドット装飾を表示する。 枠は幅いっぱい・影なし・細線で囲う（::before/::after の装飾はそのまま活かす）*/ .slide__frame { width: 100%; max-width: none; box-shadow: none; border: 1px solid var(--c-line-soft); border-radius: 0; /* スマホは資料の角を四角に */ } /* 旧・装飾サークルのみ非表示（::before のグラデ／::after のドットは表示する）*/ .slide__bg { display: none; } /* 枠外の装飾（PC用の固定pxでスマホでは枠からはみ出す）はスマホで隠す。 ページ番号は下部ナビ、社名は表紙キャンバス内に出ているため重複しない。 資料の中身（.slide__canvas）はPCと同じレイアウトのまま等倍縮小される。 */ .slide__pageno { display: block; right: 8px; bottom: 6px; top: auto; font-size: 6px; color: var(--c-accent); } /* 表紙も画面の縦中央に */ .slide.cover { align-items: center; } /* 社名フッターはキャンバス内に移動済み。最終ページ(20)と同じく キャンバスと一緒に等倍縮小されるため、スマホ専用の位置・サイズ指定は不要。 */ /* スマホでもPCと同じく全ページ分のドットを表示。狭い画面に20個収まるよう 1粒を小さく・間隔を詰める（＝ドット列の幅も抑える）。 */ .deck-nav__dots { display: flex; max-width: 70vw; gap: 2px; } .deck-nav__dot { width: 4px; height: 4px; } .deck-nav__dot.is-active { transform: scale(1.25); } .deck-nav { gap: 12px; } /* 上部バーを狭い画面に収める。スマホでは再生ボタンも非表示（横スワイプで送る）*/ .deckbar__count { display: none; } .deckbar__play { display: none; } } /* ===================================================================== スマホ／タブレットでも「資料の中身」はPCと同じレイアウトを維持する。 .slide__canvas は 1280px 固定設計だが、LP(style.css)のスマホ用 メディアクエリ（≤920/700/560/480px）がビューポート幅で発火し、 キャンバス内のグリッドを縦積み・カルーセル化・文字縮小してしまう。 ここで .slide__canvas を前置した高詳細度ルールで、PC時のレイアウトに 差し戻す（キャンバス外のUIには影響しない）。 ===================================================================== */ @media (max-width: 920px) { /* --- 比較グリッド（02/03 など）: 横3カラム＋中央矢印を維持 --- */ .slide__canvas .vs-grid { grid-template-columns: 1fr 1fr; } .slide__canvas .vs-grid--tri { grid-template-columns: 1fr auto 1fr; gap: 22px; } .slide__canvas .vs-x { margin: 0; } /* 矢印チップはPCと同じ「右向き」を維持（LPスマホ用の下向きclip-pathを打ち消す）*/ .slide__canvas .vs-x__chip, .slide__canvas .ba-arrow__chip { clip-path: polygon(0% 16%, 72% 16%, 72% 0%, 100% 50%, 72% 100%, 72% 84%, 0% 84%); flex-direction: column; min-height: 0; } .slide__canvas .vs-x__chip { width: 180px; height: 142px; padding: 6px 44px 6px 16px; } .slide__canvas .ba-arrow__chip { width: 196px; height: 148px; padding: 6px 48px 6px 18px; } .slide__canvas .vs-x__chip small, .slide__canvas .ba-arrow__chip small { font-size: 16px; } .slide__canvas .vs-x__chip strong, .slide__canvas .ba-arrow__chip strong { font-size: 16px; } /* 導入の流れフッター（19）: 3カラムを維持（LPスマホの1列化を打ち消す）*/ .slide__canvas .onb-foot { grid-template-columns: repeat(3, 1fr); } /* --- POINT/導入ステップ: 横カルーセルではなくPCのグリッドのまま --- */ .slide__canvas .steps-grid { display: grid; grid-template-columns: repeat(3, 1fr); grid-auto-rows: auto; overflow: visible; padding: 0; } .slide__canvas .steps-grid > .step { flex: initial; } .slide__canvas .onb-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; overflow: visible; padding: 0; } .slide__canvas .onb-grid > .onb-card { flex: initial; } .slide__canvas .onb-card__step { font-size: 14px; line-height: 1.1; margin-bottom: 0; } .slide__canvas .step p { font-size: 13px; } /* --- 数値・統計グリッド: PCの列数を維持 --- */ .slide__canvas .metric-grid { grid-template-columns: repeat(4, 1fr); } .slide__canvas .stat-grid { grid-template-columns: 1fr 1fr; } /* --- 料金カード（18）: 2枚を左右に並べる（縦積み解除）--- */ .slide__canvas .price-grid { grid-template-columns: 1fr 1fr; } /* --- 3軸グリッド/タイムライン（07/14 など）: 横並びを維持 --- */ .slide__canvas .axes-grid { grid-template-columns: repeat(3, 1fr); } .slide__canvas .timeline { grid-template-columns: 1fr 1fr; } /* --- 1日の比較カード: ヘッダー/合計を横並びに戻す --- */ .slide__canvas .daycard__head { display: flex; flex-direction: row; align-items: center; gap: 14px; } .slide__canvas .daycard__head > strong { font-size: inherit; } .slide__canvas .daycard__total { flex-direction: column; align-items: flex-start; } .slide__canvas .daycard__role { margin-left: auto; justify-self: auto; } /* --- 比較表: PCの余白・文字サイズを維持 --- */ .slide__canvas .ctable th, .slide__canvas .ctable td { padding: 11px 14px; font-size: 14px; line-height: normal; } /* --- 投稿の質（06）: 素人/プロを左右2カラムに維持（縦積み解除）--- */ .slide__canvas .post-compare { grid-template-columns: 1fr 1fr; } .slide__canvas .post-compare > .post-col:nth-child(2) { margin-top: 0; } .slide__canvas .post-arrow__icon { transform: none; } /* before/after グリッド（左カード｜矢印｜右カード）も横並びを維持 --- */ .slide__canvas .ba-grid { grid-template-columns: 1fr auto 1fr; } /* --- 投稿の質フラグ（06）: 全フラグ表示・幅・文字をPC基準に --- */ .slide__canvas .post-flags { grid-template-columns: 1fr 1fr; } .slide__canvas .post-flags .flag:nth-child(n+5) { display: flex; } .slide__canvas .post-flags .flag { width: auto; white-space: nowrap; font-size: 11px; padding: 8px 12px; } .slide__canvas .post-col > .tag, .slide__canvas .post-col > .flag { width: clamp(172px, 17.5vw, 212px); white-space: nowrap; padding: 8px 12px; } /* --- 手動改行の出し分け: PC用の改行・語句を表示、スマホ用は隠す --- */ .slide__canvas .br-pc { display: inline; } .slide__canvas .br-sp { display: none; } .slide__canvas .pc-hide { display: none; } .slide__canvas .sp-hide { display: inline; } .slide__canvas .body-text br, .slide__canvas .section__lead br, .slide__canvas .section__note br, .slide__canvas .reality__lead br { display: inline; } /* --- 強調ボックス・小見出しの文字サイズをPCに合わせる --- */ .slide__canvas .banner { font-size: 18px; line-height: 1.5; padding: 22px 32px; } .slide__canvas .point-bar { font-size: 18px; padding: 22px 32px; } .slide__canvas .point-bar__text { font-size: 18px; line-height: 1.5; } .slide__canvas .vs-card__sub { font-size: 13.5px; } .slide__canvas .vs-card__foot { font-size: 14px; } .slide__canvas .quote-chip { font-size: 14px; } .slide__canvas .onb-card p, .slide__canvas .compare-card p { font-size: 13.5px; } } /* キーボード操作のヒント（PCの初回のみ表示する小チップ） */ .kbd-hint { position: fixed; right: 18px; bottom: 22px; z-index: 55; font-size: 12px; color: var(--c-muted); background: rgba(255,255,255,.9); border: 1px solid var(--c-line-soft); padding: 7px 12px; border-radius: 10px; box-shadow: var(--shadow-sm); } @media (max-width: 720px) { .kbd-hint { display: none; } } /* ===================================================================== スライド内コンポーネントの寸法調整（固定キャンバス 1280×720 に収める） ※ LPは vw 依存のサイズが多いため、ここで固定pxに上書きして安定させる ===================================================================== */ .slide__canvas .container { padding: 0; max-width: none; } /* 課題② 現場の消耗 */ .slide__canvas .reality__grid { gap: 48px; grid-template-columns: 0.95fr 1.05fr; align-items: center; } .slide__canvas .hugenum { font-size: 128px; } .slide__canvas .reality__lead { font-size: 14.5px; line-height: 1.95; } .slide__canvas .reality__lead .nowrap { white-space: nowrap; } .slide__canvas .reality__right { position: relative; min-height: 540px; } /* イラストは右・縦中央に固定。transformは登場アニメで打ち消されるので auto マージンで中央寄せする */ .slide__canvas .scene--reality { max-width: 310px; position: absolute; right: 6%; top: 0; bottom: 0; margin: auto 0; height: max-content; } .slide__canvas .reality__right .thought-bubbles { position: absolute; inset: 0; } .slide__canvas .reality__right .bubble { position: absolute; max-width: 215px; font-size: 13px; right: auto; bottom: auto; } /* 中央のイラストを囲むように配置（4つ）*/ .slide__canvas .reality__right .bubble:nth-child(1) { display: block; top: 14%; left: 12%; } /* 何を投稿 — 少し右寄せ（スマホでもLPの display:none を上書きして表示）*/ .slide__canvas .reality__right .bubble:nth-child(2) { top: 60%; left: 18%; } /* 毎日 — 投稿しても の右下 */ .slide__canvas .reality__right .bubble:nth-child(3) { top: 38%; left: -2%; } /* 投稿しても — 左中（何を投稿 の真下）*/ .slide__canvas .reality__right .bubble:nth-child(4) { top: 2%; left: 42%; } /* ネタが思いつかない — 右上 */ /* 1日の比較（2枚並列・縦横を広く使う）*/ .slide__canvas .day-compare { display: grid; grid-template-columns: 1fr 1fr; gap: 36px; align-items: stretch; width: 100%; } .slide__canvas .day-compare .daycard { padding: 28px 34px; display: flex; flex-direction: column; } /* タイムラインは1列に。行は詰めて、余白はカード上下に均等配分（折り返し回避）*/ .slide__canvas .day-compare .timeline { display: flex; flex-direction: column; gap: 0; flex: 0 1 auto; margin: 8px 0 0; } .slide__canvas .day-compare .tl-item { padding: 11px 2px; flex: 0 0 auto; display: flex; align-items: center; gap: 16px; } /* 合計はカード下端へ。行とのあいだの余白を均す */ .slide__canvas .day-compare .daycard__total { margin-top: 12px; padding-top: 8px; } .slide__canvas .day-compare .tl-item + .tl-item { border-top: 1px solid var(--c-line-soft); } .slide__canvas .day-compare .timeline--light .tl-item + .tl-item { border-top: 1px solid rgba(255,255,255,.12); } .slide__canvas .day-compare .tl-item strong { font-size: 14.5px; white-space: nowrap; } .slide__canvas .day-compare .tl-time { flex: 0 0 auto; min-width: 52px; } .slide__canvas .day-compare .daycard__role { font-size: 12.5px; } /* ダークカード(AI運用)の店長キャプションは暗い地に埋もれるので白にする */ .slide__canvas .day-compare .daycard--ai .daycard__role { color: rgba(255,255,255,.82); } .slide__canvas .day-compare .daycard__head { margin-bottom: 4px; } /* 中央の矢印チップを少し大きく：縦幅(高さ)を増やし、矢じり(矢印の幅)も広げる。 キャンバスは固定1280px設計なので vw 依存のclampを使わず固定pxで指定する。 clip-path: 軸の上下を 13%/87% に広げて縦幅UP、矢じり開始を 64% にして幅UP。 */ .slide__canvas .vs-x__chip, .slide__canvas .ba-arrow__chip { /* 矢じりの開始を66%に後退＋全体幅を短く＝ずんぐりコンパクトな矢印に。 */ clip-path: polygon(0% 13%, 66% 13%, 66% 0%, 100% 50%, 66% 100%, 66% 87%, 0% 87%); } .slide__canvas .vs-x__chip { width: 182px; height: 170px; padding: 6px 46px 6px 18px; } .slide__canvas .ba-arrow__chip { width: 202px; height: 178px; padding: 6px 48px 6px 20px; } /* 矢印チップの文字を少し大きく。2行（小ラベル＋強調語）の間隔は少しだけ空ける。 固定キャンバス基準のpx指定なので、どの端末でもキャンバスのscaleに比例して変わる。 */ .slide__canvas .vs-x__chip, .slide__canvas .ba-arrow__chip { gap: 5px; } .slide__canvas .vs-x__chip small, .slide__canvas .ba-arrow__chip small { font-size: 19px; line-height: 1.06; } .slide__canvas .vs-x__chip strong, .slide__canvas .ba-arrow__chip strong { font-size: 31px; line-height: 1.02; } /* 2カラム（テキスト + フォン）*/ .slide__canvas .s-two .phone { transform: scale(.9); transform-origin: center; } /* 投稿の質 */ .slide__canvas .ig-post__img--photo { height: 150px; object-fit: cover; } .slide__canvas .post-compare .ig-post__txt { font-size: 12.5px; } /* 導入の流れ */ .slide__canvas .onb-card { padding: 18px 16px; } .slide__canvas .onb-card__illust { height: 84px; object-fit: contain; margin-inline: auto; } .slide__canvas .onb-card p { font-size: 13px; line-height: 1.6; } .slide__canvas .onb-foot { margin-top: 18px; } /* 仕組み（3列×2行にして縦を圧縮）*/ .slide__canvas .steps-grid { grid-template-columns: repeat(3, 1fr); grid-auto-rows: auto; } .slide__canvas .step { padding: 16px 18px; } .slide__canvas .step h3 { font-size: 16px; } .slide__canvas .step p { font-size: 12.5px; line-height: 1.55; } .slide__canvas .point-bar { margin-top: 16px; } /* 3つの軸 / 概要 — カードは中身の高さに合わせる（カード内の余分な下余白を作らない）。 グリッドはbody内で縦中央に置く。*/ .slide__canvas .axes-grid { flex: 0 1 auto; grid-auto-rows: auto; align-content: center; } .slide__canvas .axis-card { padding: 24px 26px; display: flex; flex-direction: column; justify-content: flex-start; gap: 14px; } /* 比較ペア（A店/B店）は説明文（ライン）のすぐ下に置く（下の余白を作らない）*/ .slide__frame.is-dark .axis-card { justify-content: flex-start; } .slide__canvas .axis-card .axis-compare { margin-top: 14px; } /* 明るいスライドのaxis-cardは白カードとして見せる（概要スライド等）*/ .slide__frame:not(.is-dark) .axis-card { background: var(--c-surface); border: 1px solid var(--c-line-soft); border-radius: var(--radius); box-shadow: var(--shadow-sm); } /* 明るいカードでは見出し・本文が白文字になって消えるのを防ぐ */ .slide__canvas .axis-head h3 { font-size: 20px; } .slide__frame:not(.is-dark) .axis-card h3 { color: var(--c-ink); } .slide__frame:not(.is-dark) .axis-card p { color: var(--c-text); } .slide__canvas .axis-card p { font-size: 14px; line-height: 1.75; } .slide__canvas .axis-compare .ac-row p { font-size: 12.5px; } /* 3列で赤(A店)・青(B店)ボックスの縦幅を揃える（内容が少ない列も同じ高さに）。 タグ(A店/B店)と文章を「上揃え」にして、1行テキストでもタグが文章と同じ高さに並ぶ ようにする（中央寄せだとタグだけ上に浮いて位置がズレて見えるため）。 */ /* A店/B店タグは文章の左上に置く（テキスト先頭行に揃える） */ .slide__canvas .axis-compare .ac-row { align-items: flex-start; } /* タグはすべて同じ幅（A店/B店で幅がズレないように固定幅）。位置は左上。 */ .slide__canvas .axis-compare .ac-row .ac-tag { align-self: flex-start; margin-top: 1px; width: 46px; padding-left: 0; padding-right: 0; text-align: center; } .slide__canvas .axis-compare .ac-row--neg { min-height: 64px; } .slide__canvas .axis-compare .ac-row--pos { min-height: 84px; } /* 明背景（is-dark以外）では、比較ボックス内の文字を濃色にして視認性を確保する。 （元の薄ピンク/薄水色はダーク背景前提で、白カード上では読みづらいため）*/ .slide__frame:not(.is-dark) .axis-compare .ac-row--neg p { color: var(--c-red); } .slide__frame:not(.is-dark) .axis-compare .ac-row--pos p { color: var(--c-accent-deep); font-weight: 600; } /* LINE連携でできること — 緑のチェック付きリスト */ .slide__canvas .line-can { list-style: none; margin: 0 0 24px; padding: 0; display: flex; flex-direction: column; gap: 9px; } .slide__canvas .line-can li { position: relative; padding: 10px 18px 10px 40px; background: rgba(6,199,85,.10); border: 1px solid rgba(6,199,85,.34); border-radius: var(--radius-pill); font-size: 14.5px; font-weight: 700; color: var(--c-ink); } .slide__canvas .line-can li::before { content: ""; position: absolute; left: 16px; top: 50%; transform: translateY(-50%); width: 9px; height: 9px; border-radius: 50%; background: var(--c-line); } /* 料金カード：取り消し線つきの旧価格は控えめ・小さめに表示 */ .slide__canvas .price__strike { font-size: .62em; font-weight: 700; opacity: .6; } /* 4コマ漫画（ストーリー）。イラストは .yonkoma__art の中に を入れて差し替え */ .slide__canvas .yonkoma { display: flex; align-items: stretch; gap: 10px; width: 100%; } .slide__canvas .yonkoma--grid { flex-direction: column; gap: 12px; max-width: 1010px; margin: 0 auto; } .slide__canvas .yk-row { display: flex; align-items: stretch; gap: 10px; } .slide__canvas .yonkoma__panel { flex: 1 1 0; min-width: 0; position: relative; display: flex; flex-direction: column; background: var(--c-surface); border: 1px solid var(--c-line-soft); border-radius: 0; box-shadow: var(--shadow-sm); overflow: hidden; } .slide__canvas .yonkoma__arrow { flex: 0 0 auto; align-self: center; display: flex; align-items: center; justify-content: center; color: var(--c-accent); } .slide__canvas .yonkoma__arrow svg { width: 30px; height: 30px; fill: none; stroke: currentColor; stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round; } .slide__canvas .yonkoma__no { position: absolute; top: 10px; left: 10px; z-index: 4; width: 32px; height: 32px; border-radius: 50%; background: var(--c-accent); color: #fff; font-family: var(--font-en); font-weight: 800; font-size: 16px; display: flex; align-items: center; justify-content: center; } .slide__canvas .yonkoma__no--tl { top: 10px; left: 10px; right: auto; bottom: auto; } .slide__canvas .yonkoma__no--tr { top: 10px; right: 10px; left: auto; bottom: auto; } .slide__canvas .yonkoma__no--bl { bottom: 10px; left: 10px; top: auto; right: auto; } .slide__canvas .yonkoma__no--br { bottom: 10px; right: 10px; top: auto; left: auto; } .slide__canvas .yonkoma__art { position: relative; height: 192px; display: flex; flex-direction: row; align-items: center; justify-content: center; gap: 24px; text-align: center; background: var(--c-accent-soft); border-bottom: 1px solid var(--c-line-soft); padding: 14px 16px; } .slide__canvas .yonkoma__art-ph { color: var(--c-muted); font-size: 14px; font-weight: 700; letter-spacing: .04em; line-height: 1.5; } .slide__canvas .yonkoma__art-img { order: 1; height: 150px; width: auto; max-width: 46%; object-fit: contain; display: block; flex: 0 0 auto; } .slide__canvas .yonkoma__bubble { order: 2; position: relative; flex: 0 0 auto; z-index: 3; max-width: 40%; background: #fff; color: var(--c-ink); font-size: 12px; font-weight: 800; line-height: 1.4; padding: 8px 13px; border-radius: 16px; border: 2px solid var(--c-accent); box-shadow: 0 6px 14px rgba(14,156,224,.18); } .slide__canvas .yonkoma__bubble::before { content: ""; position: absolute; left: -9px; top: calc(50% - 4px); width: 11px; height: 11px; border-radius: 50%; background: #fff; border: 2px solid var(--c-accent); } .slide__canvas .yonkoma__bubble::after { content: ""; position: absolute; left: -20px; top: calc(50% + 6px); width: 7px; height: 7px; border-radius: 50%; background: #fff; border: 2px solid var(--c-accent); } .slide__canvas .yonkoma__cap { flex: 1; min-height: 78px; display: block; padding: 13px 16px; font-size: 13.5px; font-weight: 400; line-height: 1.62; color: var(--c-text); } .slide__canvas .yonkoma__cap strong { display: inline-block; margin-bottom: 2px; font-size: 15px; color: var(--c-accent-deep); font-weight: 800; } /* 提供価値（導入前後）— 右の水色カードのふちに水色の枠線 */ .slide__canvas .ba-card--after { border: 2px solid var(--c-accent-light); } /* 背景/なぜSNS — 右の水色カード内の3つのボックスを白に */ .slide__canvas .vs-card--pos .reason-list li { background: #fff; } /* 実績 — 水色カード内の4つの数値ボックスを白に */ .slide__canvas .vs-card--pos .stat { background: #fff; } /* 右（伸びている＝pos）カードに水色の縁を付ける */ .slide__canvas .vs-card--pos { border: 2px solid var(--c-accent); } /* ダークスライドのリード文（3つの軸など）を白系に */ .slide__frame.is-dark .section__note--light { color: rgba(255,255,255,.8); line-height: 1.85; } /* 効果予測・導入後 */ .slide__canvas .metric { padding: 20px 22px; } .slide__canvas .metric__note { font-size: 12.5px; } /* CTA */ .slide__canvas .scene--cta { max-width: 380px; } /* max-width:none / nowrap で、LPのスマホ用ルール（max-width:460px→折返し）を打ち消し、 スマホでも2枠を横並びのまま保つ */ .slide__canvas .cta__cards { display: flex; flex-wrap: nowrap; gap: 16px; margin-top: 22px; max-width: none; } /* 「オンライン30分」「無料」の枠は横幅を揃える（内容で幅が変わらないよう固定）*/ .slide__canvas .cta__card { flex: 0 0 250px; min-width: 0; } .slide__canvas .cta__card strong { white-space: nowrap; } /* バナー類の余白詰め */ .slide__canvas .banner { margin-top: 18px; font-size: 18px; } /* 生成中タイピングドット */ .gen-dots { display: inline-flex; gap: 3px; margin-left: 6px; vertical-align: middle; } .gen-dots i { width: 4px; height: 4px; border-radius: 50%; background: currentColor; opacity: .4; } @media (prefers-reduced-motion: no-preference) { .gen-dots i { animation: genDot 1s infinite; } .gen-dots i:nth-child(2) { animation-delay: .2s; } .gen-dots i:nth-child(3) { animation-delay: .4s; } @keyframes genDot { 0%,100% { opacity: .3; transform: translateY(0); } 50% { opacity: 1; transform: translateY(-2px); } } } /* ===================================================================== コンテンツ間の余白リズム（要素と要素の間隔を均一に整える） ===================================================================== */ .slide__canvas { gap: 26px; } .slide__canvas .s-head { display: flex; flex-direction: column; gap: 10px; margin-bottom: 0; } .slide__canvas .s-head > * { margin: 0; } .slide__canvas .s-body { gap: 22px; } .slide__canvas .s-two__text { display: flex; flex-direction: column; gap: 16px; } .slide__canvas .s-two__text > * { margin: 0; } .slide__canvas .banner { margin-top: 0; } .slide__canvas .point-bar { margin-top: 0; } .slide__canvas .source { margin-top: 0; } .slide__canvas .onb-foot { margin-top: 0; } .slide__canvas .reality__left { display: flex; flex-direction: column; gap: 14px; } .slide__canvas .reality__left > * { margin: 0; } /* 出典は1行で収める */ .slide__canvas .reality__left .source { white-space: nowrap; font-size: 11.5px; } .cover .s-body { gap: 20px; } .cover .s-body > * { margin: 0; } /* ===================================================================== 常時アニメーション追加（全体的に動きを増やす） ===================================================================== */ @media (prefers-reduced-motion: no-preference) { /* 吹き出しのゆらゆら（課題①）*/ @keyframes bubbleFloat { 0%,100% { transform: translateY(0) rotate(0); } 50% { transform: translateY(-9px) rotate(-.7deg); } } .slide__canvas .reality__right .bubble { animation: bubbleFloat 4.6s ease-in-out infinite; } .slide__canvas .reality__right .bubble:nth-child(2) { animation-duration: 5.4s; animation-delay: -1.2s; } .slide__canvas .reality__right .bubble:nth-child(3) { animation-duration: 5s; animation-delay: -.6s; } .slide__canvas .reality__right .bubble:nth-child(4) { animation-duration: 6s; animation-delay: -1.8s; } /* アイコンチップの呼吸（つくる・届ける・改善する／3つの軸 等）*/ @keyframes chipBreath { 0%,100% { transform: translateY(0) scale(1); } 50% { transform: translateY(-3px) scale(1.05); } } .slide__canvas .icon-chip { animation: chipBreath 4.2s ease-in-out infinite; } .slide__canvas .axis-card:nth-child(2) .icon-chip, .slide__canvas .step:nth-child(2) .icon-chip { animation-delay: -1.4s; } .slide__canvas .axis-card:nth-child(3) .icon-chip, .slide__canvas .step:nth-child(3) .icon-chip { animation-delay: -2.8s; } /* ブランドドットを全体で点滅 */ .brand-dot { animation: brandPulse 2.6s ease-in-out infinite; } /* リストの丸ドットがふわっと脈打つ（背景／なぜSNS）*/ @keyframes dotPop { 0%,100% { transform: scale(1); } 50% { transform: scale(1.2); } } .slide__canvas .rl-dot { animation: dotPop 3.2s ease-in-out infinite; } .slide__canvas .reason-list li:nth-child(2) .rl-dot { animation-delay: -1s; } .slide__canvas .reason-list li:nth-child(3) .rl-dot { animation-delay: -2s; } /* タグのほのかな明滅でアクセントに生き感 */ @keyframes tagGlow { 0%,100% { box-shadow: 0 0 0 0 rgba(14,156,224,0); } 50% { box-shadow: 0 0 0 4px rgba(14,156,224,.12); } } .slide__canvas .tag--accent { animation: tagGlow 3.4s ease-in-out infinite; } /* === 追加アニメーション（登場演出のtransformを奪わない要素・擬似要素・子要素に限定）=== */ /* アクセント文字（青）のやわらかなきらめき */ @keyframes accentShimmer { 0%,100% { filter: brightness(1); } 50% { filter: brightness(1.16); } } .slide__canvas .section__title .accent, .slide__canvas .cover__title .accent, .slide__canvas .price--light .price__num { animation: accentShimmer 3.8s ease-in-out infinite; } /* チェックマークの脈動（機能リスト）— 子spanなので登場演出と干渉しない */ @keyframes checkPop { 0%,100% { transform: scale(1); } 50% { transform: scale(1.22); } } .slide__canvas .fl-check { display: flex; line-height: 1; transform-origin: center; animation: checkPop 3s ease-in-out infinite; } .slide__canvas .feature-list li:nth-child(2n) .fl-check { animation-delay: -.6s; } .slide__canvas .feature-list li:nth-child(3n) .fl-check { animation-delay: -1.3s; } /* カードのやわらかな影の呼吸（box-shadowのみ＝transform非干渉）staggerで生き感 */ @keyframes cardGlow { 0%,100% { box-shadow: 0 6px 16px rgba(30,40,80,.05); } 50% { box-shadow: 0 12px 30px rgba(14,156,224,.12); } } .slide__canvas .axis-card, .slide__canvas .metric, .slide__canvas .onb-card { animation: cardGlow 5.5s ease-in-out infinite; } .slide__canvas .axis-card:nth-child(2), .slide__canvas .metric:nth-child(2), .slide__canvas .onb-card:nth-child(2) { animation-delay: -1.8s; } .slide__canvas .axis-card:nth-child(3), .slide__canvas .metric:nth-child(3), .slide__canvas .onb-card:nth-child(3) { animation-delay: -3.6s; } .slide__canvas .metric:nth-child(4), .slide__canvas .onb-card:nth-child(4) { animation-delay: -1s; } /* バナー／ポイントバーを横切る光のスイープ（擬似要素）*/ @keyframes barSweep { 0% { transform: translateX(-120%); } 60%,100% { transform: translateX(120%); } } .slide__canvas .banner, .slide__canvas .point-bar { position: relative; overflow: hidden; } .slide__canvas .banner::after, .slide__canvas .point-bar::after { content: ""; position: absolute; top: 0; bottom: 0; left: 0; width: 60%; pointer-events: none; background: linear-gradient(105deg, transparent, rgba(255,255,255,.16), transparent); animation: barSweep 6s ease-in-out infinite; } /* メトリクスの数字がほのかに脈打つ（子spanがあれば、なければ要素自身でも安全な範囲）*/ @keyframes softBeat { 0%,100% { transform: scale(1); } 50% { transform: scale(1.04); } } .slide__canvas .metric__num { display: inline-block; transform-origin: left center; animation: softBeat 4s ease-in-out infinite; } } /* 料金（価格カードを高さ圧縮）*/ .slide__canvas .price-card { padding: 22px 26px; } .slide__canvas .price__num { font-size: 32px; } .slide__canvas .price { margin-bottom: 12px; flex-direction: column; align-items: flex-start; gap: 4px; } .slide__canvas .price__init { font-size: 20px; font-weight: 800; color: var(--c-ink); letter-spacing: .01em; } .slide__canvas .price-card--dark .price__init { color: rgba(255,255,255,.92); } .slide__canvas .price__row { display: flex; align-items: baseline; gap: 6px; } .slide__canvas .price-card > .tag { margin-bottom: 12px; } .slide__canvas .feature-list li { padding: 8.5px 0; font-size: 13.5px; justify-content: space-between; gap: 14px; } /* アイコンを文章の一番右に寄せて、もっと目立たせる */ .slide__canvas .feature-list li > .fl-check, .slide__canvas .feature-list li > .fl-x, .slide__canvas .feature-list li > .fl-o, .slide__canvas .feature-list li > .fl-t { order: 2; margin-left: auto; width: 28px; height: 28px; font-size: 15px; flex: none; } .slide__canvas .feature-list .fl-check { background: var(--c-teal); color: #fff; font-weight: 800; box-shadow: 0 0 0 4px rgba(20,184,166,.18), 0 4px 10px rgba(20,184,166,.32); } .slide__canvas .feature-list .fl-o { background: #e1e6ee; color: #6b7384; box-shadow: 0 0 0 3px rgba(120,130,150,.10); } .slide__canvas .feature-list .fl-x, .slide__canvas .feature-list .fl-t { background: #e6e9ef; color: #9aa2af; } .slide__canvas .price-foot { margin-top: 4px; padding-top: 12px; font-size: 13px; } /* 右の料金カード（ダーク）の「/ 1日あたり」「カバー範囲」を白文字に */ .slide__canvas .price-card--dark .price__unit { color: #fff; } .slide__canvas .price-card--dark .price-foot--light .muted { color: rgba(255,255,255,.85); } /* ===== ページ8：SNSHUBアプリ モック（縦に自動スクロール）===== */ .slide__canvas .phone--app .phone__screen { padding: 0; background: #ece9fb; height: 540px; min-height: 540px; max-height: 540px; } .slide__canvas .app-mock { flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; background: #ece9fb; font-family: var(--font-jp); text-align: left; overflow: hidden; } .slide__canvas .appm-head { flex: 0 0 auto; display: flex; align-items: center; justify-content: space-between; padding: 12px 14px; background: #fff; box-shadow: 0 1px 0 rgba(20,30,60,.06); z-index: 3; } .slide__canvas .appm-head__menu, .slide__canvas .appm-head__gear { color: #4a4f5c; font-size: 15px; } .slide__canvas .appm-head__bell { position: relative; display: inline-flex; align-items: center; color: #2a2f3a; } .slide__canvas .appm-head__bell svg { width: 18px; height: 18px; } .slide__canvas .appm-head__bdot { position: absolute; top: -1px; right: -1px; width: 7px; height: 7px; border-radius: 50%; background: #e5484d; border: 1.5px solid #fff; } .slide__canvas .appm-head__brand { display: flex; align-items: center; gap: 6px; font-weight: 800; font-size: 13px; color: #14142a; } .slide__canvas .appm-dot { width: 18px; height: 18px; background: url('data:image/svg+xml;utf8,') center / contain no-repeat; } .slide__canvas .appm-scroll-wrap { flex: 1 1 auto; min-height: 0; position: relative; overflow-y: auto; overflow-x: hidden; -webkit-overflow-scrolling: touch; scrollbar-width: none; -ms-overflow-style: none; } .slide__canvas .appm-scroll-wrap::-webkit-scrollbar { width: 0; height: 0; display: none; } .slide__canvas .appm-feed { padding: 12px 14px 18px; display: flex; flex-direction: column; gap: 9px; } /* スマホ本体は位置固定（浮遊アニメなし）。中身は縦スクロールのみ（手動＋ゆっくり自動） */ .slide__canvas .s-two .phone--app { animation: none !important; } .slide__canvas .appm-back { font-size: 11px; color: #6a7080; margin: 0; } .slide__canvas .appm-photo { border-radius: 10px; overflow: hidden; background: #fff; box-shadow: 0 4px 12px rgba(20,30,60,.08); } .slide__canvas .appm-photo img { width: 100%; height: 152px; object-fit: cover; display: block; } .slide__canvas .appm-h { font-size: 13px; font-weight: 800; color: #14142a; margin: 2px 0; display: flex; align-items: center; gap: 7px; } .slide__canvas .appm-ai { font-size: 9px; font-weight: 800; color: #fff; background: #0e9ce0; padding: 2px 7px; border-radius: 6px; letter-spacing: .04em; } .slide__canvas .appm-card { background: #fff; border-radius: 12px; padding: 12px 13px; box-shadow: 0 3px 10px rgba(20,30,60,.06); } .slide__canvas .appm-card p { font-size: 11px; line-height: 1.7; color: #3a3f4c; margin: 0 0 7px; } .slide__canvas .appm-card p:last-child { margin-bottom: 0; } .slide__canvas .appm-loc { color: #1f9d57; font-weight: 700; } .slide__canvas .appm-card__t { font-weight: 800; font-size: 12px; color: #14142a; } .slide__canvas .appm-card__d { color: #6a7080 !important; } .slide__canvas .appm-link { color: #0a7cc0; font-weight: 800; font-size: 11.5px; margin: 0 !important; } .slide__canvas .appm-chips { display: flex; flex-direction: column; gap: 6px; align-items: flex-start; } .slide__canvas .appm-chip { font-size: 10.5px; font-weight: 700; padding: 5px 11px; border-radius: 999px; border: 1px solid; } .slide__canvas .appm-chip--area { color: #1f9d57; background: #eafaf0; border-color: #b6e6c8; } .slide__canvas .appm-chip--kw { color: #c9821f; background: #fef6e9; border-color: #f6dcae; } .slide__canvas .appm-tags { display: flex; flex-wrap: wrap; gap: 7px; } .slide__canvas .appm-tags span { font-size: 10.5px; font-weight: 700; color: #fff; background: #0e9ce0; padding: 6px 11px; border-radius: 999px; } .slide__canvas .appm-warn { background: #fdeaea; border: 1px solid #f3c9c9; border-radius: 10px; padding: 10px 12px; font-size: 10.5px; line-height: 1.6; color: #c0494c; } .slide__canvas .appm-warn strong { display: block; margin-bottom: 3px; } .slide__canvas .appm-bar { flex: 0 0 auto; display: flex; gap: 9px; padding: 11px 13px; background: #fff; box-shadow: 0 -1px 0 rgba(20,30,60,.06); z-index: 3; } .slide__canvas .appm-btn { display: flex; align-items: center; justify-content: center; gap: 5px; border-radius: 12px; padding: 11px 8px; font-size: 12px; font-weight: 800; } .slide__canvas .appm-btn--ghost { flex: 0 0 36%; background: #fff; border: 1.5px solid #d6dae5; color: #4a4f5c; } .slide__canvas .appm-btn--primary { flex: 1; background: #0e9ce0; color: #fff; box-shadow: 0 4px 12px rgba(14,156,224,.32); } /* ページ8：スマホの左に担当者イラスト */ .slide__canvas .s-two__media--staff { gap: 6px; } .slide__canvas .s-two__media--staff .staff-illus { width: 138px; height: auto; flex: 0 0 auto; align-self: flex-end; margin-bottom: 6px; } /* 表紙：スマホの左に担当者イラスト */ .slide__canvas .cover__phone { position: relative; } .slide__canvas .cover__staff { position: absolute; left: -250px; top: 194px; width: 212px; height: auto; z-index: 6; filter: drop-shadow(0 16px 30px rgba(14,156,224,.18)); } /* ===== 9Pペルソナ アプリモック 追加スタイル ===== */ .slide__canvas .appm-label { font-size: 10.5px; font-weight: 700; color: #6a7080; margin: 6px 0 3px; } .slide__canvas .appm-select { font-size: 10.5px; color: #8a909c; background: #f4f5fa; border: 1px solid #e3e6ef; border-radius: 8px; padding: 8px 10px; } .slide__canvas .appm-chips--wrap { flex-direction: row; flex-wrap: wrap; gap: 6px; margin: 2px 0 0; } .slide__canvas .appm-row { display: flex; align-items: center; gap: 8px; font-size: 10.5px; font-weight: 700; color: #3a3f4c; padding: 3px 0; } .slide__canvas .appm-row__k { flex: 0 0 66px; } .slide__canvas .appm-row__t { flex: 1; height: 7px; background: #e7e9f1; border-radius: 999px; overflow: hidden; } .slide__canvas .appm-row__t i { display: block; height: 100%; background: #0e9ce0; border-radius: 999px; } .slide__canvas .appm-row__v { flex: 0 0 auto; color: #0a7cc0; } .slide__canvas .appm-note { font-size: 10px; color: #8a909c; margin: 6px 0 0 !important; } .slide__canvas .appm-persona { position: relative; background: #fff; border-radius: 12px; padding: 11px 13px; box-shadow: 0 3px 10px rgba(20,30,60,.06); } .slide__canvas .appm-persona strong { font-size: 11.5px; color: #14142a; display: block; padding-right: 26px; } .slide__canvas .appm-persona p { font-size: 10px; color: #6a7080; margin: 4px 0 0; line-height: 1.55; } .slide__canvas .appm-rank { position: absolute; top: 10px; right: 11px; width: 20px; height: 20px; border-radius: 6px; color: #fff; font-size: 10px; font-weight: 800; display: flex; align-items: center; justify-content: center; } .slide__canvas .appm-rank--s { background: #0e9ce0; } .slide__canvas .appm-rank--a { background: #5bb8e6; } .slide__canvas .appm-rank--b { background: #9fcfe8; } /* ===== 10Pレポート アプリモック 追加スタイル ===== */ .slide__canvas .appm-stats { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; } .slide__canvas .appm-stat { background: #f6f7fc; border-radius: 10px; padding: 9px 10px; } .slide__canvas .appm-stat__k { font-size: 9.5px; color: #8a909c; display: block; } .slide__canvas .appm-stat__v { font-size: 17px; font-weight: 800; color: #14142a; display: block; line-height: 1.1; margin: 2px 0; } .slide__canvas .appm-stat__v small { font-size: 10px; font-weight: 700; color: #6a7080; } .slide__canvas .appm-stat__d { font-size: 9.5px; font-weight: 800; color: #8a909c; } .slide__canvas .appm-stat__d.up { color: #1f9d57; } .slide__canvas .appm-chart { width: 100%; height: 88px; display: block; } .slide__canvas .appm-chart polyline { fill: none; stroke: #0e9ce0; stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; } .slide__canvas .appm-chart polyline.l2 { stroke: #bfe2f5; } /* ===== 10Pレポート：投稿→分析→改善のサイクル図 ===== */ .slide__canvas .cycle { position: relative; width: 320px; height: 320px; margin: 0 auto; } .slide__canvas .cycle__ring { position: absolute; inset: 30px; width: calc(100% - 60px); height: calc(100% - 60px); overflow: visible; } .slide__canvas .cycle__center { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); text-align: center; width: 150px; } .slide__canvas .cycle__center-k { font-size: 12px; font-weight: 700; color: var(--c-muted); } .slide__canvas .cycle__center strong { display: block; font-size: 19px; font-weight: 900; color: var(--c-ink); line-height: 1.3; margin: 3px 0 0; } .slide__canvas .cycle__center-up { display: inline-block; margin-top: 2px; font-size: 24px; font-weight: 900; color: var(--c-accent); } .slide__canvas .cycle__node { position: absolute; display: flex; flex-direction: column; align-items: center; gap: 5px; background: #fff; border: 1px solid var(--c-line-soft); border-radius: 16px; padding: 12px 18px; box-shadow: var(--shadow-sm); z-index: 2; } .slide__canvas .cycle__node b { font-size: 15px; font-weight: 800; color: var(--c-ink); } .slide__canvas .cycle__ic { width: 34px; height: 34px; border-radius: 10px; background: var(--c-accent-soft); color: var(--c-accent); display: flex; align-items: center; justify-content: center; } .slide__canvas .cycle__ic .icon { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 2; } .slide__canvas .cycle__node--top { top: -8px; left: 50%; transform: translateX(-50%); } .slide__canvas .cycle__node--br { bottom: 14px; right: -8px; } .slide__canvas .cycle__node--bl { bottom: 14px; left: -8px; } /* ===== 11P LINE連携：LINE通知モック ===== */ .slide__canvas .app-mock--line { background: #dde6ef; } .slide__canvas .appm-head--line { background: #06c755; } .slide__canvas .appm-head--line .appm-head__menu, .slide__canvas .appm-head--line .appm-head__gear, .slide__canvas .appm-head--line .appm-head__brand { color: #fff; } .slide__canvas .linem-dot { width: 16px; height: 16px; border-radius: 50%; background: #fff; } .slide__canvas .linem-feed { gap: 10px; } .slide__canvas .linem-day { align-self: center; font-size: 9.5px; color: #5a6472; background: rgba(255,255,255,.6); padding: 3px 11px; border-radius: 999px; margin: 0 auto; } .slide__canvas .linem-row { display: flex; gap: 7px; align-items: flex-start; } .slide__canvas .linem-ava { flex: 0 0 auto; width: 28px; height: 28px; border-radius: 50%; background: #06c755; color: #fff; font-size: 10px; font-weight: 800; display: flex; align-items: center; justify-content: center; } .slide__canvas .linem-ava--img { object-fit: cover; background: #fff; } /* LINE連携: ヘッダーのSNS秘書名をアイコンなしで中央に */ .slide__canvas .appm-head--line { position: relative; } .slide__canvas .appm-head--line .appm-head__brand { position: absolute; left: 50%; transform: translateX(-50%); gap: 0; } .slide__canvas .linem-bubbles { display: flex; flex-direction: column; gap: 6px; min-width: 0; max-width: 205px; } .slide__canvas .linem-bubble { background: #fff; border-radius: 4px 16px 16px 16px; padding: 9px 12px; font-size: 11px; line-height: 1.65; color: #2a2f3a; box-shadow: 0 1px 2px rgba(0,0,0,.08); } .slide__canvas .linem-bubble strong { color: #14142a; } .slide__canvas .linem-bubble--photo { padding: 4px; } .slide__canvas .linem-bubble--photo img { width: 100%; height: 120px; object-fit: cover; border-radius: 12px; display: block; } .slide__canvas .linem-actions { display: flex; gap: 8px; padding-left: 35px; margin-top: 2px; } .slide__canvas .linem-btn { display: flex; align-items: center; justify-content: center; gap: 5px; border-radius: 999px; padding: 11px 14px; font-size: 12px; font-weight: 800; } .slide__canvas .linem-btn--ok { flex: 1; background: #06c755; color: #fff; box-shadow: 0 4px 12px rgba(6,199,85,.32); animation: okPop 1.8s ease-in-out infinite; will-change: transform; } @keyframes okPop { 0%, 100% { transform: translateY(0); box-shadow: 0 4px 12px rgba(6,199,85,.32); } 45% { transform: translateY(-7px); box-shadow: 0 12px 20px rgba(6,199,85,.45); } } .slide__canvas .linem-btn--redo { flex: 0 0 auto; background: rgba(255,255,255,.85); color: #7a8493; border: 1.5px solid rgba(0,0,0,.08); } /* 10P レポート：横フロー＋ループ矢印 */ .slide__canvas .flowloop { display: flex; flex-direction: column; align-items: center; width: 100%; } .slide__canvas .flowloop__row { display: flex; align-items: stretch; justify-content: center; gap: 8px; width: 100%; } .slide__canvas .flowloop__step { flex: 1 1 0; display: flex; flex-direction: column; align-items: center; gap: 7px; padding: 22px 6px 18px; background: #fff; border: 2px solid var(--c-accent-soft); border-radius: 18px; box-shadow: 0 10px 24px rgba(14,156,224,.10); } .slide__canvas .flowloop__step--hl { border-color: var(--c-accent); background: var(--c-accent-soft); } .slide__canvas .flowloop__ic { width: 54px; height: 54px; border-radius: 50%; background: var(--c-accent-soft); display: flex; align-items: center; justify-content: center; } .slide__canvas .flowloop__step--hl .flowloop__ic { background: #fff; } .slide__canvas .flowloop__ic .icon { width: 28px; height: 28px; color: var(--c-accent); } .slide__canvas .flowloop__step b { font-size: 19px; color: var(--c-ink); } .slide__canvas .flowloop__sub { font-size: 12px; color: var(--c-muted); font-weight: 700; } .slide__canvas .flowloop__arrow { display: flex; align-items: center; font-size: 26px; font-weight: 900; color: var(--c-accent); } .slide__canvas .flowloop__back { width: 90%; height: 50px; margin-top: 4px; } .slide__canvas .flowloop__cap { margin-top: 8px; font-size: 17px; font-weight: 800; color: var(--c-ink); display: flex; align-items: center; gap: 6px; } .slide__canvas .flowloop__cap strong { color: var(--c-accent); } .slide__canvas .flowloop__up { color: var(--c-accent); font-size: 22px; font-weight: 900; } /* 10P レポート：上昇スパイラル */ .slide__canvas .spiral { position: relative; width: 340px; height: 392px; margin: 0 auto; } .slide__canvas .spiral__coil { position: absolute; inset: 0; width: 100%; height: 100%; } .slide__canvas .spiral__node { position: absolute; transform: translate(-50%, -50%); display: flex; align-items: center; gap: 9px; padding: 8px 18px 8px 8px; background: #fff; border: 2px solid var(--c-accent-soft); border-radius: 32px; box-shadow: 0 10px 22px rgba(14,156,224,.16); } .slide__canvas .spiral__node--hl { border-color: var(--c-accent); background: var(--c-accent-soft); } .slide__canvas .spiral__ic { width: 38px; height: 38px; border-radius: 50%; background: var(--c-accent-soft); display: flex; align-items: center; justify-content: center; flex: 0 0 auto; } .slide__canvas .spiral__node--hl .spiral__ic { background: #fff; } .slide__canvas .spiral__ic .icon { width: 21px; height: 21px; color: var(--c-accent); } .slide__canvas .spiral__node b { font-size: 19px; color: var(--c-ink); } .slide__canvas .spiral__top { position: absolute; left: 170px; top: 50px; transform: translate(-50%, -50%); display: inline-flex; align-items: center; gap: 4px; padding: 5px 14px; background: var(--c-accent); color: #fff; font-weight: 800; font-size: 14px; border-radius: 20px; box-shadow: 0 8px 18px rgba(14,156,224,.3); white-space: nowrap; } .slide__canvas .spiral__top b { font-size: 15px; } .slide__canvas .spiral__cap { text-align: center; margin-top: 8px; font-size: 17px; font-weight: 800; color: var(--c-ink); } .slide__canvas .spiral__cap strong { color: var(--c-accent); } .slide__canvas .spiralwrap { display: flex; flex-direction: column; align-items: center; justify-content: center; } /* 10P レポート：循環サイクル（投稿→分析→改善→精度UP） */ .slide__canvas .cyc { display: flex; flex-direction: column; align-items: center; width: 452px; margin: 52px auto 0; } /* レポート: ドーナツ画像を縦中央に */ .slide__canvas .s-two__media:has(.cyc) { align-items: center; } .slide__canvas .cyc__donut { position: relative; width: 446px; height: 385px; } .slide__canvas .cyc__svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; } .slide__canvas .cyc__cap { margin-top: -34px; text-align: center; font-size: 25px; font-weight: 900; color: var(--c-ink); line-height: 1.15; } .slide__canvas .cyc__cap strong { color: var(--c-accent); } .slide__canvas .cyc2__ic { fill: none; stroke-width: 1.8; } .slide__canvas .cyc2__s { fill: #fff; font-size: 12px; font-weight: 700; text-anchor: start; letter-spacing: .04em; opacity: .92; } .slide__canvas .cyc2__n { fill: #fff; font-size: 22px; font-weight: 800; text-anchor: start; } .slide__canvas .cyc__c1 { fill: var(--c-accent); font-size: 22px; font-weight: 800; text-anchor: middle; dominant-baseline: middle; } .slide__canvas .cyc__c2 { fill: var(--c-accent); font-size: 24px; font-weight: 900; text-anchor: middle; dominant-baseline: middle; } .slide__canvas .cyc__no { fill: #fff; font-size: 17px; font-weight: 800; text-anchor: middle; dominant-baseline: middle; } .slide__canvas .cyc__seg { fill: #fff; font-size: 21px; font-weight: 800; text-anchor: middle; dominant-baseline: middle; } .slide__canvas .cyc__num { font-size: 15px; font-weight: 800; text-anchor: middle; dominant-baseline: middle; } .slide__canvas .cyc__ck { fill: var(--c-ink); font-size: 13px; font-weight: 800; text-anchor: middle; dominant-baseline: middle; } .slide__canvas .cyc__cs { fill: var(--c-accent); font-size: 30px; font-weight: 900; text-anchor: middle; dominant-baseline: middle; } .slide__canvas .cyc__up { font-size: 18px; } .slide__canvas .cyc__cu { fill: var(--c-muted); font-size: 12px; font-weight: 700; text-anchor: middle; dominant-baseline: middle; } /* 10P サイクル：人物イラスト */ .slide__canvas .cyc__person { position: absolute; width: 118px; height: auto; z-index: 3; pointer-events: none; } .slide__canvas .cyc__person--3 { left: -42px; top: 250px; } .slide__canvas .cyc__person--2 { right: -56px; top: 167px; width: 132px; } .slide__canvas .cyc__person--1 { left: 170px; top: -104px; width: 76px; } /* 10P レポート：投稿→分析→改善 の3イラスト循環 */ .slide__canvas .flow3 { width: 470px; margin: 0 auto; } .slide__canvas .flow3__row { display: flex; align-items: flex-end; justify-content: center; gap: 6px; } .slide__canvas .flow3__item { margin: 0; width: 132px; text-align: center; } .slide__canvas .flow3__art { display: flex; align-items: flex-end; justify-content: center; height: 150px; } .slide__canvas .flow3__art img { max-width: 100%; max-height: 150px; width: auto; height: auto; object-fit: contain; } .slide__canvas .flow3__item figcaption { margin-top: 10px; font-size: 18px; font-weight: 800; color: var(--c-accent); } .slide__canvas .flow3__arr { font-size: 26px; font-weight: 800; color: #bcd7e6; line-height: 1; padding-bottom: 30px; } .slide__canvas .flow3__loop { display: block; width: 100%; height: auto; margin-top: 4px; overflow: visible; } .slide__canvas .flow3__cap { text-align: center; margin-top: 10px; font-size: 17px; font-weight: 800; color: var(--c-ink); } .slide__canvas .flow3__cap strong { color: var(--c-accent); } /* プラン比較ページ：投稿頻度の強調 */ .slide__canvas .plan__freq { display: flex; align-items: baseline; gap: 10px; margin: 8px 0 16px; padding: 11px 16px; background: var(--c-accent-soft); border-radius: 12px; } .slide__canvas .plan__freq-label { font-size: 13px; font-weight: 800; color: var(--c-muted); } .slide__canvas .plan__freq strong { font-size: 21px; font-weight: 900; color: var(--c-accent); } .slide__canvas .plan__freq--light { background: rgba(255,255,255,.14); } .slide__canvas .plan__freq--light .plan__freq-label { color: rgba(255,255,255,.75); } .slide__canvas .plan__freq--light strong { color: #fff; } /* プラン2＝おすすめ（明るいまま強調） */ .slide__canvas .price-card--reco { position: relative; border: 2px solid var(--c-accent); box-shadow: 0 14px 34px rgba(14,156,224,.20); } .slide__canvas .reco-badge { position: absolute; top: -14px; right: 24px; background: var(--c-accent); color: #fff; font-size: 13px; font-weight: 800; padding: 6px 16px; border-radius: 999px; box-shadow: 0 4px 10px rgba(14,156,224,.3); } .slide__canvas .plan__freq--reco { background: var(--c-accent); } .slide__canvas .plan__freq--reco .plan__freq-label { color: #fff; } .slide__canvas .plan__freq--reco strong { color: #fff; } /* スライドに重ねる秘書イラスト（位置は各ページで調整） */ .slide__canvas .hisho-deco { position: absolute; z-index: 6; height: auto; filter: drop-shadow(0 14px 26px rgba(20,40,80,.18)); pointer-events: none; } /* 4P: イラストをSNS継続運用カード内に配置（下端をカード下に揃え・反転なし・固定） */ .slide__canvas .vs-grid--tri .vs-card--pos { position: relative; overflow: visible; } .slide__canvas .hisho-deco--p4 { position: absolute; left: auto; right: 2px; bottom: -16px; width: 188px; transform: none; animation: none !important; } .slide__canvas .feature-list--plain .fl-o { display: none; } .slide__canvas .feature-list--plain li::before { content: "・"; color: var(--c-accent); font-weight: 800; margin-right: 2px; } .slide__canvas .hisho-deco--p10 { left: 612px; bottom: 0; width: 212px; } /* 13P: イラストをSNS秘書に任せる運用カード内に（下端をカード下に・反転・固定） */ .slide__canvas .vs-grid:not(.vs-grid--tri) .vs-card--pos { position: relative; overflow: visible; } .slide__canvas .hisho-deco--p13 { position: absolute; left: auto; right: 8px; bottom: -6px; width: 196px; transform: none; animation: none !important; } .slide__canvas .metric-grid.metric-grid--half { grid-template-columns: repeat(2, 1fr); max-width: 860px; gap: 12px; } .slide__canvas .metric-grid--half .metric { padding: 10px 22px; gap: 1px; } .slide__canvas .metric-grid--half .metric__num { font-size: 40px; } .slide__canvas .metric-grid--half .metric__sub { margin-bottom: 4px; } .slide__canvas .metric-grid--half .metric__note { margin-top: 4px; } .slide__canvas .hisho-deco--p14 { right: 90px; bottom: 96px; width: 248px; transform: scaleX(-1); animation: none !important; } /* 7P 仕組み：ステップ2列＋右に秘書 */ .slide__canvas .mech-row { display: flex; gap: 30px; align-items: flex-start; } .slide__canvas .steps-grid.steps-grid--half { grid-template-columns: repeat(2, 1fr); flex: 1 1 0; min-width: 0; } .slide__canvas .mech-right { flex: 0 0 318px; display: flex; flex-direction: column; align-items: center; text-align: center; gap: 14px; margin-top: -16px; } .slide__canvas .mech-hisho { width: 256px; height: auto; filter: drop-shadow(0 14px 26px rgba(20,40,80,.18)); transform: scaleX(-1); margin-top: -24px; } .slide__canvas .mech-caption { position: relative; font-size: 18px; font-weight: 800; color: #fff; line-height: 1.55; margin: 0 0 30px; background: var(--c-dark); border-radius: 30px; padding: 26px 32px; box-shadow: none; text-align: center; } .slide__canvas .mech-caption::after { content: ""; position: absolute; left: 70%; bottom: -16px; transform: translateX(-50%); width: 0; height: 0; border-left: 14px solid transparent; border-right: 14px solid transparent; border-top: 18px solid var(--c-dark); } .slide__canvas .mech-caption::before { content: none; } .slide__canvas .mech-caption strong { color: var(--c-accent-light); } .slide__canvas .mech-ai { display: block; width: fit-content; margin: 0 auto 10px; background: rgba(255,255,255,.10); color: var(--c-accent-light); font-family: var(--font-en); font-weight: 800; letter-spacing: .12em; font-size: 13px; padding: 6px 13px; border-radius: 8px; } .slide__canvas .day-compare .daycard--ai { position: relative; overflow: visible; } .slide__canvas .hisho-deco--p5 { position: absolute; left: auto; right: 24px; bottom: 0; width: 196px; transform: none; } /* P5 のイラストはアニメーションさせず固定 */ .slide__canvas .hisho-deco--p5, .slide__canvas .hisho-deco--p5b { animation: none !important; } /* 6P 投稿の質：下の秘書解説 */ .slide__canvas .post-note { display: flex; align-items: center; gap: 18px; margin-top: 16px; background: #fff; border: 1px solid var(--c-line-soft); border-radius: 16px; padding: 12px 22px; box-shadow: var(--shadow-sm); } .slide__canvas .post-note__hisho { width: 72px; height: auto; flex: 0 0 auto; } .slide__canvas .post-note__text { font-size: 16px; font-weight: 700; color: var(--c-text); line-height: 1.6; } .slide__canvas .post-note__text strong { color: var(--c-accent); } /* 5P AI日：合計を左寄せ（5分を左へ）。右下の秘書はそのまま */ .slide__canvas .day-compare .daycard__total--ai { justify-content: flex-start; gap: 24px; } /* 10P サマリーレポート：ボックス左に秘書 */ .slide__canvas .solve-row { display: flex; gap: 18px; align-items: flex-end; margin-top: 4px; } .slide__canvas .solve-hisho { width: 162px; height: auto; flex: 0 0 auto; filter: drop-shadow(0 14px 26px rgba(20,40,80,.18)); } .slide__canvas .solve-row .solve-box { flex: 1 1 0; min-width: 0; } /* 7P ステップ枠を低く */ .slide__canvas .steps-grid--half .step { padding: 13px 18px; } .slide__canvas .steps-grid--half .step__head .icon-chip { width: 34px; height: 34px; border-radius: 9px; } .slide__canvas .steps-grid--half .step__head .icon-chip .icon { width: 18px; height: 18px; } /* 6P 収まり調整：画像・本文・解説をコンパクトに */ .slide__canvas .post-compare .ig-post__img--photo { height: 110px; } .slide__canvas .post-compare .ig-post__txt { font-size: 11.5px; line-height: 1.5; } .slide__canvas .post-compare .ig-post { padding-bottom: 6px; } .slide__canvas .post-note { margin-top: 10px; padding: 9px 18px; gap: 14px; } .slide__canvas .post-note__hisho { width: 60px; } .slide__canvas .post-note__text { font-size: 14px; line-height: 1.55; } /* 6P 3カラム（素人｜プロ｜秘書）＋下に解説 */ .slide__canvas .post-compare.post-compare--three { grid-template-columns: 1fr 1fr 0.64fr; align-items: stretch; } .slide__canvas .post-col--hisho { display: flex; align-items: flex-end; justify-content: center; } .slide__canvas .post-col--hisho img { width: 100%; max-width: 210px; height: auto; filter: drop-shadow(0 12px 24px rgba(20,40,80,.16)); transform: scaleX(-1); } .slide__canvas .post-caption { text-align: center; margin-top: 14px; font-size: 17px; font-weight: 800; color: var(--c-ink); line-height: 1.65; } .slide__canvas .post-caption .accent { color: var(--c-accent); } /* 6P 下段：文章（左）＋秘書（右） */ .slide__canvas .post-bottom { display: flex; align-items: center; gap: 22px; margin-top: 14px; } .slide__canvas .post-bottom .point-bar { flex: 1 1 0; margin-top: 0; } .slide__canvas .post-bottom__hisho { width: 152px; height: auto; flex: 0 0 auto; filter: drop-shadow(0 12px 24px rgba(20,40,80,.16)); transform: scaleX(-1); } /* 設計の3点：キーワードチップ */ .slide__canvas .kw-chips { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; } .slide__canvas .kw-chips span { font-size: 13px; font-weight: 700; color: var(--c-accent); background: #fff; border: 1.5px solid var(--c-accent); border-radius: 999px; padding: 5px 12px; } /* 6P 左カラム（カード＋文章 同幅）＋右に大きい秘書 */ .slide__canvas .post-left { max-width: 880px; } .slide__canvas .hisho-deco--p6 { right: 36px; bottom: 30px; width: 284px; transform: scaleX(-1); } /* 6P AIバナー：全幅・小さめ・低め */ .slide__canvas .point-bar--p6 { margin: 14px 0 0; padding-top: 16px; padding-bottom: 16px; } .slide__canvas .point-bar--p6 .point-bar__text { font-size: 18px; line-height: 1.5; } .slide__canvas .cyc__cap-sm { font-size: 17px; font-weight: 800; } /* 11P 設計の3点（POINT01/02/03 カード） */ .slide__canvas .design-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; align-items: stretch; } .slide__canvas .design-card { display: flex; flex-direction: column; background: var(--c-surface); border: 1px solid var(--c-line-soft); border-radius: 16px; padding: 20px 22px; box-shadow: var(--shadow-sm); } .slide__canvas .design-head { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; } .slide__canvas .design-no { background: var(--c-accent); color: #fff; font-size: 12px; font-weight: 800; padding: 4px 11px; border-radius: 999px; letter-spacing: .04em; flex: 0 0 auto; } .slide__canvas .design-head h3 { font-size: 19px; font-weight: 900; color: var(--c-ink); } .slide__canvas .design-claim { font-size: 15px; font-weight: 800; color: var(--c-accent); line-height: 1.5; margin-bottom: 7px; } .slide__canvas .design-desc { font-size: 13px; color: var(--c-muted); line-height: 1.7; margin-bottom: 12px; } .slide__canvas .design-ex { margin-top: auto; background: var(--c-accent-soft); border-radius: 12px; padding: 12px 14px; min-height: 200px; box-sizing: border-box; } .slide__canvas .design-ex__label { display: block; font-size: 11px; font-weight: 800; color: var(--c-accent); letter-spacing: .04em; margin-bottom: 7px; } .slide__canvas .design-ex ul { list-style: none; display: flex; flex-direction: column; gap: 6px; } .slide__canvas .design-ex li { font-size: 13px; font-weight: 700; color: var(--c-ink); line-height: 1.5; } .slide__canvas .design-persona { gap: 13px; } .slide__canvas .design-persona li { display: flex; align-items: center; gap: 12px; } .slide__canvas .rank { flex: 0 0 auto; width: 30px; height: 30px; border-radius: 5px; color: #fff; font-size: 16px; font-weight: 800; line-height: 1; display: inline-flex; align-items: center; justify-content: center; } .slide__canvas .rank--s { background: #0e9ce0; } .slide__canvas .rank--a { background: #1f9bd4; } .slide__canvas .rank--b { background: #6c8cc0; } /* 11P 詳細版：フォント調整 */ .slide__canvas .design-head { gap: 9px; } .slide__canvas .design-head h3 { font-size: 20px; } .slide__canvas .design-no { font-size: 12.5px; } .slide__canvas .design-sub { font-size: 15.5px; font-weight: 800; color: var(--c-accent); line-height: 1.55; margin-bottom: 9px; } .slide__canvas .design-card .design-desc { font-size: 12.5px; margin-bottom: 8px; } .slide__canvas .design-ex__label { font-size: 14px; margin-bottom: 9px; } .slide__canvas .design-persona li { font-size: 14px; } .slide__canvas .design-persona li em { display: inline-block; font-style: normal; color: var(--c-muted); font-size: 12.5px; font-weight: 600; margin-top: 1px; } .slide__canvas .kw-chips--lg span { font-size: 14px; padding: 7px 13px; } .slide__canvas .kw-box__label--lg { font-size: 15px; } /* 7P POINTラベルを角丸水色バッジに */ .slide__canvas .step__no { background: var(--c-accent); color: #fff; border-radius: 999px; padding: 5px 14px; font-size: 18px; } .slide__canvas .step__num { font-size: 18px; color: #fff; } /* POINT04 スマホモック：ヘッダー固定＋本体スクロール */ .slide__canvas .phone--video .phone__screen { padding: 0; background: #fff; height: 540px; min-height: 540px; overflow: hidden; display: flex; flex-direction: column; } .slide__canvas .mock-head { width: 100%; display: block; flex: 0 0 auto; } .slide__canvas .mock-body { flex: 1 1 auto; overflow: hidden; position: relative; } .slide__canvas .mock-body__inner { display: flex; flex-direction: column; width: 100%; height: 200%; animation: mockSlide 8s ease-in-out infinite; } .slide__canvas .mock-body__inner img { width: 100%; height: 50%; object-fit: cover; object-position: center top; display: block; } @keyframes mockSlide { 0%, 30% { transform: translateY(0); } 50%, 80% { transform: translateY(-50%); } 100% { transform: translateY(0); } } /* 8P 登録キーワードを横に流して2行程度に */ .slide__canvas .kw-box .kw-tags { display: flex; flex-wrap: wrap; gap: 9px; } /* 青の吹き出しチップ／solve-box左の青ライン強調 */ .slide__canvas .quote-chip--info { background: var(--c-accent-soft); color: var(--c-accent); border: 1.5px solid var(--c-accent); font-weight: 700; display: inline-flex; align-items: center; } .slide__canvas .quote-chip--info .qc-mark { margin-right: 6px; font-weight: 800; } .slide__canvas .solve-box--light { border-left: 6px solid var(--c-accent); } /* line-can 青版（11P） */ .slide__canvas .line-can--blue li { background: var(--c-accent-soft); border-color: var(--c-accent); } .slide__canvas .line-can--blue li::before { background: var(--c-accent); } /* line-can 赤版（！マーク）9P・11P */ .slide__canvas .line-can--red li { background: rgba(229,72,77,.10); border-color: var(--c-red); color: var(--c-ink); } .slide__canvas .line-can--red li::before { content: "!"; width: 19px; height: 19px; left: 14px; background: var(--c-red); color: #fff; border-radius: 50%; font-weight: 900; font-size: 13px; line-height: 19px; text-align: center; display: block; } /* 10P design-head アイコン小さめ */ .slide__canvas .design-head .icon-chip { width: 36px; height: 36px; border-radius: 10px; } .slide__canvas .design-head .icon-chip .icon { width: 19px; height: 19px; } /* LINEアバター（10P） */ .slide__canvas .linem-avatar { width: 26px; height: 26px; border-radius: 50%; object-fit: cover; flex: 0 0 auto; vertical-align: middle; margin-right: 3px; } /* アイコン＋POINTバッジ付き見出し */ .slide__canvas .point-eyebrow { display: inline-flex; align-items: center; gap: 9px; } .slide__canvas .point-eyebrow .icon-chip { width: 30px; height: 30px; border-radius: 9px; } .slide__canvas .point-eyebrow .icon-chip .icon { width: 17px; height: 17px; } /* 4P サブ太字 / 5P 役割太字・AI側白 / 5P 左カードを不調カラーに */ .slide__canvas .vs-card__sub { font-weight: 700; } .slide__canvas .day-compare .daycard__role { font-weight: 700; } .slide__canvas .day-compare .daycard--ai .daycard__role { color: #fff; font-weight: 700; } .slide__canvas .day-compare .daycard--manual { background: #fff; border: none; } .slide__canvas .vs-card--pos .vs-card__metric { border-bottom-color: #fff; } /* P5 day-compare: divider lines inside cards */ /* 左（人が運用）: 薄い赤 */ .slide__canvas .day-compare .daycard--manual .tl-item + .tl-item { border-top-color: rgba(229,72,77,.28); } .slide__canvas .day-compare .daycard--manual .daycard__head { border-bottom-color: rgba(229,72,77,.28); } .slide__canvas .day-compare .daycard--manual .daycard__total { border-top-color: rgba(229,72,77,.28); } /* 右（SNS秘書）: 少し白寄りのグレー */ .slide__canvas .day-compare .daycard--ai .tl-item + .tl-item { border-top-color: rgba(255,255,255,.55); } .slide__canvas .day-compare .daycard--ai .daycard__head { border-bottom-color: rgba(255,255,255,.55); } .slide__canvas .day-compare .daycard--ai .daycard__total { border-top-color: rgba(255,255,255,.55); } /* P5 day-compare labels: swap 人が運用 colors / 両ラベル同サイズ */ .slide__canvas .day-compare .daycard--manual .tag--neg { background: #fde7e6; color: var(--c-red); } .slide__canvas .day-compare .tag--accent, .slide__canvas .day-compare .tag--neg { font-size: 15px; padding: 8px 18px; } /* プラン(17p): 機能リストの文字を左寄せ */ .slide__canvas .feature-list--plain li { justify-content: flex-start; gap: 8px; } /* 13P 属人化リスク: タグをP5(人が運用)と同じサイズに / サブを右寄せ */ .slide__canvas .vs-grid:not(.vs-grid--tri) .vs-card__head { justify-content: flex-start; } .slide__canvas .vs-grid:not(.vs-grid--tri) .vs-card__head .tag { font-size: 15px; padding: 8px 18px; } .slide__canvas .vs-grid:not(.vs-grid--tri) .vs-card__sub { margin-left: auto; text-align: right; } /* 4P 比較カードのサブ（看板と口コミだけ／週3-4回…）も右寄せ */ .slide__canvas .vs-grid--tri .vs-card__sub { margin-left: auto; text-align: right; } /* 13P フッター文言を大きく */ .slide__canvas .vs-grid:not(.vs-grid--tri) .vs-card__foot { font-size: 16px; } /* 9P 画像を選択：スマホにアプリ画面のスクショをそのまま表示 */ .slide__canvas .phone--shot .phone__screen { padding: 34px 14px 14px; display: flex; flex-direction: column; overflow: hidden; height: 540px; min-height: 540px; max-height: 540px; background: #fdfdff; } .slide__canvas .phone--shot .mock-shot-wrap { flex: 1 1 auto; min-height: 0; overflow: hidden; border-radius: 8px; margin-bottom: 10px; display: flex; flex-direction: column; background: #fff; } .slide__canvas .phone--shot .mock-shot { width: 100%; height: 100%; object-fit: cover; object-position: top center; display: block; } .slide__canvas .phone--shot .mock-top { width: 100%; height: auto; display: block; flex: 0 0 auto; } .slide__canvas .mock-grid--app { flex: 1 1 auto; display: grid; grid-template-columns: repeat(5, 1fr); gap: 3px; padding: 3px 6px 6px; background: #fff; align-content: start; overflow: hidden; } .slide__canvas .mock-grid--app .mock-cell { aspect-ratio: 1; border-radius: 4px; box-shadow: 0 1px 3px rgba(20,40,80,.12); animation: none; } .slide__canvas .phone--shot .phone__urlbar { margin-top: 0; } /* 9P（旧）画像グリッド演出 */ .slide__canvas .phone--grid .phone__screen { display: flex; flex-direction: column; height: 540px; overflow: hidden; background: #fff; } .slide__canvas .phone--grid .mock-head { flex: 0 0 auto; width: 100%; display: block; } .slide__canvas .mock-grid { flex: 1; display: grid; grid-template-columns: repeat(3, 1fr); grid-auto-rows: 1fr; gap: 8px; padding: 11px; background: #eef2f6; align-content: stretch; overflow: hidden; } .slide__canvas .mock-grid--4 { grid-template-columns: repeat(4, 1fr); grid-auto-rows: min-content; gap: 7px; padding: 12px; background: #fff; align-content: center; justify-content: center; } .slide__canvas .mock-grid--4 .mock-cell { aspect-ratio: 1; border-radius: 9px; } .slide__canvas .mock-cell { position: relative; border-radius: 10px; overflow: hidden; box-shadow: 0 2px 6px rgba(20,40,80,.12); animation: cellFloat 4.6s ease-in-out infinite; animation-delay: calc(var(--i) * 0.33s); will-change: transform; } .slide__canvas .mock-cell img { width: 100%; height: 100%; object-fit: cover; display: block; } @keyframes cellFloat { 0%, 62%, 100% { transform: translateY(0); box-shadow: 0 2px 6px rgba(20,40,80,.12); } 16%, 40% { transform: translateY(-10px); box-shadow: 0 12px 20px rgba(14,156,224,.34); } } /* 料金(15P): 2カードの初期費用ブロックを同じ高さにし、金額行・機能行を揃える */ .slide__canvas .price-grid .price__init { display: block; min-height: 50px; margin-bottom: 2px; } /* 左（一般ツール）の初期費用だけ少し下げる（金額の位置は維持）。¥100,000のみ30px(HTML側) */ .slide__canvas .price-grid .price-card:not(.price-card--dark) .price__init { min-height: 42px; padding-top: 8px; line-height: 1.2; } /* 左の金額(¥45,000)も少しだけ下げる */ .slide__canvas .price-grid .price-card:not(.price-card--dark) .price__row { margin-top: 6px; } /* 9P 画像がポンポン浮かぶ装飾カード */ .slide__canvas .s-two__media--float { position: relative; } .slide__canvas .float-pic { position: absolute; width: 86px; height: 86px; object-fit: cover; border-radius: 15px; border: 3px solid #fff; box-shadow: 0 14px 30px rgba(20,40,80,.24); z-index: 7; pointer-events: none; animation: floatPop 3.6s ease-in-out infinite; } .slide__canvas .float-pic--1 { top: 6%; right: 2%; animation-delay: 0s; } .slide__canvas .float-pic--2 { top: 40%; left: -2%; animation-delay: .7s; } .slide__canvas .float-pic--3 { bottom: 9%; right: 0%; animation-delay: 1.4s; } @keyframes floatPop { 0%, 100% { transform: translateY(0) rotate(-3deg); } 50% { transform: translateY(-13px) rotate(3deg); } } /* ===== 全体のアニメーション強化（控えめなループ演出） ===== */ @media (prefers-reduced-motion: no-preference) { /* translate プロパティで動かすので scaleX(-1) や scale(.9) を壊さない */ @keyframes floatY { 0%, 100% { translate: 0 0; } 50% { translate: 0 -6px; } } @keyframes floatYsm { 0%, 100% { translate: 0 0; } 50% { translate: 0 -4px; } } @keyframes softPulse { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.05); } } /* 秘書イラストをゆっくり浮遊 */ .slide__canvas .hisho-deco { animation: floatYsm 5s ease-in-out infinite; } .slide__canvas .mech-hisho { animation: floatY 4.6s ease-in-out infinite; } .slide__canvas .solve-hisho { animation: floatY 5.2s ease-in-out infinite; } .slide__canvas .mech-hisho { animation-delay: .4s; } .slide__canvas .solve-hisho { animation-delay: .8s; } /* スマホモックをゆっくり浮遊（scale(.9)は維持） */ .slide__canvas .s-two .phone { animation: floatY 5.4s ease-in-out infinite; } } /* 16P 導入の流れ STEP04(ダーク): 本文とDay表記を白に */ .slide__canvas .onb-card--dark p { color: #fff; } .slide__canvas .onb-card--dark .onb-card__day { color: #fff; } /* 12P 比較表：評価マーク・競合トーンダウン・おすすめバッジ */ .slide__canvas .ctable .ev { display: inline-flex; align-items: center; justify-content: center; width: 20px; height: 20px; border-radius: 50%; font-size: 13px; font-weight: 900; margin-right: 8px; vertical-align: -3px; line-height: 1; } .slide__canvas .ctable .ev--x { background: rgba(229,72,77,.12); color: var(--c-red); } .slide__canvas .ctable .ev--t { background: rgba(216,162,58,.16); color: #c98a16; } .slide__canvas .ctable .ev--o { background: rgba(14,156,224,.16); color: var(--c-accent-deep); } /* 競合2列をトーンダウン（SNS秘書列を主役に） */ .slide__canvas .ctable tbody td:nth-child(2), .slide__canvas .ctable tbody td:nth-child(3) { color: var(--c-muted); background: #fcfcfd; } .slide__canvas .ctable thead th:nth-child(2), .slide__canvas .ctable thead th:nth-child(3) { color: var(--c-muted); background: #f4f4f6; } /* おすすめバッジ（SNS秘書ヘッダー） */ .slide__canvas .ctable .ctable__reco { display: inline-block; margin-right: 8px; padding: 2px 10px; border-radius: 999px; background: #fff; color: var(--c-accent-deep); font-size: 11px; font-weight: 800; letter-spacing: .04em; vertical-align: 2px; } /* P5 合計を2行に（リード上＋数字下・行間なし） */ .slide__canvas .day-compare .daycard__total { flex-direction: column; align-items: flex-start; gap: 0; } .slide__canvas .day-compare .daycard__total--ai { justify-content: flex-start; gap: 0; } .slide__canvas .day-compare .daycard__total-lead { line-height: 1.1; } .slide__canvas .day-compare .daycard__total > strong { line-height: 1.05; } /* P5 右カード: タスク（hl）は白、「ー」（非hl）は水色 */ .slide__canvas .day-compare .daycard--ai .tl-item strong { color: #fff !important; } .slide__canvas .day-compare .daycard--ai .tl-item:not(.tl-item--hl) strong { color: var(--c-accent-light) !important; } /* P5 左カードに疲弊した運用者イラスト（カード枠の下端にぴったり） */ .slide__canvas .day-compare .daycard--manual { position: relative; overflow: visible; } .slide__canvas .hisho-deco--p5b { position: absolute; left: auto; right: 6px; bottom: 0; width: 196px; } /* P5 合計（リード＋数字）をライン直下に */ .slide__canvas .day-compare .daycard__total { margin-top: 12px; } /* P5: 合計の上線を撤去し、タイムライン（翌朝）の直下にラインを移動。合計テキストは下のまま */ .slide__canvas .day-compare .daycard__total { border-top: none; padding-top: 0; } .slide__canvas .day-compare .daycard--manual .timeline { border-bottom: 1px solid rgba(229,72,77,.28); padding-bottom: 10px; } .slide__canvas .day-compare .daycard--ai .timeline { border-bottom: 1px solid rgba(255,255,255,.55); padding-bottom: 10px; } /* 12P 比較表：数値項目を横棒バーで比較 */ .slide__canvas .ctable .cbar { display: flex; align-items: center; gap: 9px; flex-wrap: wrap; } .slide__canvas .ctable .cbar__fill { height: 9px; border-radius: 5px; flex: 0 0 auto; display: inline-block; } .slide__canvas .ctable .cbar__fill--bad { background: var(--c-red); opacity: .75; } .slide__canvas .ctable .cbar__fill--mid { background: #d8a23a; } .slide__canvas .ctable .cbar__fill--good { background: var(--c-accent); } .slide__canvas .ctable .cbar b { font-weight: 800; font-size: 13.5px; } .slide__canvas .ctable td.ctable__hl .cbar b { color: var(--c-accent-deep); } .slide__canvas .ctable .cbar small { width: 100%; display: block; } /* 12P 比較：3枚カード型（SNS秘書を主役に） */ .slide__canvas .cmp-grid { display: grid; grid-template-columns: 1fr 1fr 1.15fr; gap: 18px; align-items: stretch; width: 100%; } .slide__canvas .cmp-card { background: #fff; border: 1px solid var(--c-line-soft); border-radius: 16px; padding: 22px 22px 18px; display: flex; flex-direction: column; } .slide__canvas .cmp-card--hero { background: var(--c-accent); border-color: var(--c-accent); box-shadow: 0 18px 42px rgba(14,156,224,.30); } .slide__canvas .cmp-card__name { margin-bottom: 16px; } .slide__canvas .cmp-card__name .tag { font-size: 14px; padding: 7px 16px; } .slide__canvas .cmp-card--hero .cmp-card__name .tag { background: #fff; color: var(--c-accent-deep); } .slide__canvas .cmp-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 13px; flex: 1 1 auto; } .slide__canvas .cmp-list li { display: grid; grid-template-columns: 22px 62px 1fr; align-items: center; gap: 9px; font-size: 13px; line-height: 1.4; } .slide__canvas .cmp-list .cmp-k { color: var(--c-muted); font-size: 11.5px; font-weight: 700; } .slide__canvas .cmp-list b { font-weight: 800; color: var(--c-ink); } .slide__canvas .cmp-card--hero .cmp-list .cmp-k { color: rgba(255,255,255,.82); } .slide__canvas .cmp-card--hero .cmp-list b { color: #fff; } .slide__canvas .cmp-card--hero .ev--o { background: rgba(255,255,255,.22); color: #fff; } .slide__canvas .cmp-foot { margin: 16px 0 0; padding-top: 14px; border-top: 1px solid var(--c-line-soft); font-size: 12px; font-weight: 700; color: var(--c-muted); } .slide__canvas .cmp-foot--hero { border-top-color: rgba(255,255,255,.25); color: #fff; } /* 12P 比較：ヒーロー2分割型（従来 → SNS秘書） */ .slide__canvas .hero2 { display: grid; grid-template-columns: 1fr auto 1.1fr; gap: 22px; align-items: center; width: 100%; } .slide__canvas .hero2-card { border-radius: 18px; padding: 26px 28px 20px; display: flex; flex-direction: column; } .slide__canvas .hero2-card--old { background: #f3f5f8; border: 1px solid var(--c-line-soft); } .slide__canvas .hero2-card--hero { background: var(--c-accent); box-shadow: 0 20px 46px rgba(14,156,224,.32); transform: scale(1.04); } .slide__canvas .hero2-head { font-size: 19px; font-weight: 900; color: var(--c-ink); margin-bottom: 18px; display: flex; align-items: baseline; gap: 10px; } .slide__canvas .hero2-head small { font-size: 12px; font-weight: 700; color: var(--c-muted); } .slide__canvas .hero2-card--hero .hero2-head { color: #fff; } .slide__canvas .hero2-vs { font-size: 34px; font-weight: 900; color: var(--c-accent); text-align: center; } .slide__canvas .hero2 .cmp-list { display: flex; flex-direction: column; gap: 14px; } .slide__canvas .hero2 .cmp-list li { display: grid; grid-template-columns: 22px 64px 1fr; align-items: center; gap: 10px; font-size: 13.5px; } .slide__canvas .hero2 .cmp-list .cmp-k { color: var(--c-muted); font-size: 12px; font-weight: 700; } .slide__canvas .hero2 .cmp-list b { font-weight: 800; color: var(--c-ink); } .slide__canvas .hero2-card--hero .cmp-list .cmp-k { color: rgba(255,255,255,.82); } .slide__canvas .hero2-card--hero .cmp-list b { color: #fff; } .slide__canvas .hero2-card--hero .ev--o { background: rgba(255,255,255,.22); color: #fff; } .slide__canvas .hero2 .cmp-foot { margin: 16px 0 0; padding-top: 14px; border-top: 1px solid var(--c-line-soft); font-size: 12px; font-weight: 700; color: var(--c-muted); } .slide__canvas .hero2 .cmp-foot--hero { border-top-color: rgba(255,255,255,.25); color: #fff; } /* 12P SNS秘書カードを比較時にさらに目立たせる */ .slide__canvas .cmp-grid { grid-template-columns: 1fr 1fr 1.4fr; align-items: center; } .slide__canvas .cmp-card:not(.cmp-card--hero) { background: #f5f6f8; transform: scale(.95); transform-origin: center; } .slide__canvas .cmp-card:not(.cmp-card--hero) .cmp-list b { color: #8a909c; } .slide__canvas .cmp-card:not(.cmp-card--hero) .cmp-card__name .tag { background: #e7e9ee; color: #8a909c; } .slide__canvas .cmp-card--hero { background: linear-gradient(160deg, #1aa9ea 0%, var(--c-accent-deep) 100%); border: 2px solid rgba(255,255,255,.55); box-shadow: 0 26px 56px rgba(14,156,224,.45); transform: scale(1.06) translateY(-6px); padding: 26px 26px 22px; } .slide__canvas .cmp-card--hero .cmp-card__name { display: flex; align-items: center; gap: 10px; } .slide__canvas .cmp-card--hero .cmp-card__name .tag { font-size: 13px; padding: 5px 16px; box-shadow: 0 4px 12px rgba(0,0,0,.12); } .slide__canvas .cmp-card--hero .cmp-card__name::after { content: "確認だけでOK！採用ゼロで運用"; font-size: 11px; font-weight: 800; color: #fff; background: rgba(255,255,255,.22); padding: 4px 10px; border-radius: 999px; white-space: nowrap; } .slide__canvas .cmp-card--hero .cmp-list li { font-size: 14px; } .slide__canvas .cmp-card--hero .ev--o { width: 22px; height: 22px; font-size: 14px; background: #fff; color: var(--c-accent-deep); } /* 12P カード内マーク（✕△◎）を丸＋固定幅で整列 */ .slide__canvas .cmp-list .ev { display: inline-flex; align-items: center; justify-content: center; width: 20px; height: 20px; border-radius: 50%; font-size: 13px; font-weight: 900; line-height: 1; margin: 0; flex: 0 0 auto; } .slide__canvas .cmp-list .ev--x { background: rgba(229,72,77,.12); color: var(--c-red); } .slide__canvas .cmp-list .ev--t { background: rgba(216,162,58,.16); color: #c98a16; } .slide__canvas .cmp-list .ev--o { background: rgba(14,156,224,.16); color: var(--c-accent-deep); } .slide__canvas .cmp-list li { grid-template-columns: 20px 62px 1fr; } .slide__canvas .cmp-list .ev { justify-self: center; } /* 12P 競合2枚（人力・代行）の間隔を狭め、SNS秘書との間は確保 */ .slide__canvas .cmp-grid { gap: 5px; } .slide__canvas .cmp-card--hero { margin-left: 20px; } /* 12P SNS秘書カードの◎を白に（青背景で視認性UP） */ .slide__canvas .cmp-card--hero .cmp-list .ev--o { background: rgba(255,255,255,.22); color: #fff; } /* P5 合計の数字（2時間20分／5分）を少し小さく */ .slide__canvas .day-compare .daycard__total > strong { font-size: 36px; } /* 9P・11P 解説ボックスの背景を白に（左の青ラインは残す） */ .slide__canvas .solve-box--light { background: var(--c-surface); border: none; box-shadow: var(--shadow-sm); border-left: 6px solid var(--c-accent); } /* 10P 「LINE連携なら、その場で片づく」を緑に */ .slide__canvas .line-title__text { color: #06c755; } .slide__canvas .line-badge { background: #06c755; } /* 6P 素人投稿の枠を白に */ .slide__canvas .ig-post:not(.ig-post--pro) { background: #fff; } /* 11P データ分析サイクル：ドーナツ＋矢印をゆっくり右回りに回転（中央テキスト・ラベルは固定） */ @media (prefers-reduced-motion: no-preference) { .slide__canvas .cyc-rot { transform-box: view-box; transform-origin: 220px 200px; animation: cycSpin 16s linear infinite; } @keyframes cycSpin { from { transform: rotate(0deg); } to { transform: rotate(360deg); } } } /* 17P プラン：右上にロゴ */ .slide__canvas .plan-logo { position: absolute; top: 30px; right: 40px; width: 200px; height: auto; z-index: 4; } /* ===== パフォーマンス：画面外スライドの常時アニメ・合成レイヤーを止めて開いた時の負荷を下げる ===== */ .deck .slide:not(.is-current) * { animation-play-state: paused !important; } .deck .slide:not(.is-current) * { will-change: auto !important; }