/* ========================================================================== bluehub.jp/vision/ アースプロジェクトの未来図 ・色は about.php のトークン（ink/blue/cyan/sea/coral/gold）を踏襲し、 「宇宙から地球を見る」夜の紺を基調に、紙色の章と交互に並べる ・動きは「見えたら動く」（.in / .show を JS が付ける）。prefers-reduced-motion では完成形で静止 ========================================================================== */ :root { --ink: #102b3f; --muted: #5d7180; --blue: #0b72b9; --cyan: #18aeca; --sea: #78d9b3; --leaf: #3fae84; --coral: #ff8c66; --gold: #f2b134; --paper: #f5fbfd; --night: #061a2c; --night2: #0b2a44; --card: #0e2d49; --line-d: #2a5a7e; --txt-d: #cfe3ef; --radius: 18px; --f-head: "Zen Maru Gothic", "Hiragino Maru Gothic ProN", "Hiragino Kaku Gothic ProN", sans-serif; --f-body: "Hiragino Kaku Gothic ProN", "Hiragino Sans", "Yu Gothic", Meiryo, system-ui, sans-serif; --f-num: "Outfit", "Zen Maru Gothic", sans-serif; } *, *::before, *::after { box-sizing: border-box; } html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; } body { margin: 0; background: var(--night); color: var(--ink); font-family: var(--f-body); font-size: 16px; line-height: 1.85; overflow-x: clip; } img { max-width: 100%; height: auto; display: block; } a { color: inherit; } button { font: inherit; color: inherit; cursor: pointer; } .sp { display: none; } @media (max-width: 640px) { .sp { display: inline; } .pc { display: none; } } .v-wrap { width: min(1080px, 100% - 32px); margin-inline: auto; } .v-wrap--wide { width: min(1180px, 100% - 32px); } /* ---------- ヘッダー ---------- */ .v-top { position: absolute; inset: 0 0 auto; z-index: 5; display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 14px 16px; color: #fff; } .v-brand { display: inline-flex; align-items: center; gap: 8px; font-family: var(--f-num); font-weight: 800; letter-spacing: .02em; text-decoration: none; } .v-brand img { border-radius: 50%; background: #fff; } .v-badge { font-size: .74rem; font-weight: 700; padding: 4px 12px; border: 1px solid rgba(255,255,255,.3); border-radius: 999px; color: var(--txt-d); white-space: nowrap; } /* ---------- ヒーロー ---------- */ .v-hero { position: relative; padding: 96px 0 56px; color: #fff; background: radial-gradient(1200px 520px at 50% -10%, rgba(24,174,202,.28), transparent 70%), radial-gradient(700px 400px at 85% 90%, rgba(120,217,179,.12), transparent 70%), linear-gradient(180deg, #04101e 0%, var(--night) 60%, #082339 100%); } .v-kicker, .sec-no { font-family: var(--f-num); font-weight: 600; letter-spacing: .22em; font-size: .78rem; color: var(--sea); margin: 0 0 14px; } .v-h1 { font-family: var(--f-head); font-weight: 900; margin: 0; font-size: clamp(2.1rem, 6.4vw, 4.4rem); line-height: 1.25; letter-spacing: .02em; } .v-h1 em { font-style: normal; color: var(--gold); position: relative; } .v-h1 em::after { content: ""; position: absolute; left: 0; right: 0; bottom: .06em; height: .14em; background: var(--gold); opacity: .35; border-radius: 4px; } .v-hero-lead { margin: 18px 0 34px; color: var(--txt-d); font-size: clamp(.98rem, 1.7vw, 1.1rem); max-width: 44em; } /* ---------- ステージ（メインプレゼン） ---------- */ .stage-shell { position: relative; } .stage-frame { position: relative; border-radius: 22px; overflow: hidden; background: #040f1d; box-shadow: 0 30px 80px rgba(0,0,0,.45), inset 0 0 0 1px rgba(255,255,255,.08); } .stage { display: block; width: 100%; height: auto; font-family: var(--f-head); font-weight: 700; } .stage-shell:fullscreen { background: #040f1d; display: flex; flex-direction: column; justify-content: center; padding: 16px; } .stage-shell:fullscreen .stage-frame { width: min(100%, calc((100vh - 170px) * 1.47)); margin-inline: auto; } /* SVGの文字サイズ（viewBox 1000幅基準。スマホでも読める大きさを下限にする） */ .t-huge { font-family: var(--f-num); font-weight: 800; font-size: 118px; } .t-xl { font-size: 84px; font-weight: 900; } .t-lg { font-size: 50px; font-weight: 900; } .t-md { font-size: 40px; font-weight: 900; } .t-sm { font-size: 32px; font-weight: 700; } .t-xs { font-size: 27px; font-weight: 700; } .t-xxs { font-size: 23px; font-weight: 700; } .ico-s { fill: none; stroke: currentColor; stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; color: #fff; } /* 星のまたたき */ .stars circle { fill: #fff; opacity: .5; animation: twinkle 4s ease-in-out infinite; } @keyframes twinkle { 50% { opacity: .12; } } /* 地球：場面ごとに位置と大きさを変える（ステージ全体でひとつの地球が旅をする） */ .globe-pos { transition: transform 1.4s cubic-bezier(.6,.05,.25,1), opacity .9s; transform: translate(500px, 300px) scale(1); } .stage[data-scene="why"] .globe-pos { transform: translate(930px, 64px) scale(.26); } .stage[data-scene="sketch"] .globe-pos { transform: translate(1100px, 700px) scale(.3); opacity: 0; } .stage[data-scene="cycle"] .globe-pos { transform: translate(500px, 330px) scale(.4); } .stage[data-scene="proof"] .globe-pos { transform: translate(-80px, 700px) scale(.4); opacity: 0; } .stage[data-scene="ai"] .globe-pos { transform: translate(500px, 900px) scale(.6); opacity: 0; } .stage[data-scene="projects"] .globe-pos { transform: translate(500px, 1000px) scale(1.4); opacity: .35; } .stage[data-scene="hundred"] .globe-pos { transform: translate(740px, 180px) scale(.9); opacity: .16; } .stage[data-scene="road"] .globe-pos { transform: translate(900px, 600px) scale(.3); } .stage[data-scene="you"] .globe-pos { transform: translate(500px, 340px) scale(.95); } .land { animation: spin 26s linear infinite; } @keyframes spin { to { transform: translateX(420px); } } .clouds { animation: drift 40s linear infinite alternate; } @keyframes drift { to { transform: translateX(-60px); } } .orbit { fill: none; stroke: rgba(120,217,179,.4); stroke-width: 2; stroke-dasharray: 4 10; } .orbit-dots circle { fill: var(--gold); opacity: 0; transform-box: fill-box; transform-origin: center; } .stage[data-scene="v-earth"] .orbit-dots circle, .stage[data-scene="you"] .orbit-dots circle, .stage[data-scene="c-catch"] .orbit-dots circle, .stage[data-scene="c-end"] .orbit-dots circle { animation: dotIn .6s var(--d) both; } .stage[data-scene="cycle"] .orbit, .stage[data-scene="cycle"] .orbit-dots, .stage[data-scene="projects"] .orbit, .stage[data-scene="projects"] .orbit-dots, .stage[data-scene="hundred"] .orbit, .stage[data-scene="hundred"] .orbit-dots { opacity: 0; } @keyframes dotIn { from { opacity: 0; transform: scale(0); } to { opacity: 1; transform: scale(1); } } /* 場面レイヤー */ .sc { opacity: 0; visibility: hidden; transition: opacity .7s, visibility 0s .7s; } .sc.on { opacity: 1; visibility: visible; transition: opacity .7s .25s, visibility 0s; } /* 文に合わせて出る要素（data-l ≦ いまの文番号 で .show） */ /* ※SVGの transform 属性を上書きしないよう、CSSは個別プロパティ translate / scale で動かす */ .ln, .tile { opacity: 0; translate: 0 14px; transition: opacity .7s calc(var(--d, 0s)), translate .7s calc(var(--d, 0s)) cubic-bezier(.2,.8,.2,1); } .ln.show, .tile.show { opacity: 1; translate: none; } .why-card.ln.dim { opacity: .6; } .pop { transform-box: fill-box; transform-origin: center; } .ln.show .pop { animation: popIn .6s var(--d, 0s) cubic-bezier(.2,1.4,.4,1) both; } @keyframes popIn { from { opacity: 0; scale: .4; } to { opacity: 1; scale: 1; } } /* 線を描く（pathLength=1 を前提） */ .draw { stroke-dasharray: 1; stroke-dashoffset: 1; transition: stroke-dashoffset 1.4s calc(var(--d, 0s) + .1s) ease-out; } .show .draw, .show.draw, .sc.on > .draw { stroke-dashoffset: 0; } .scribble { stroke-dasharray: 4 6; } .q-mark { font-family: var(--f-num); font-weight: 800; animation: wobble 2.4s ease-in-out infinite; transform-box: fill-box; transform-origin: center; } @keyframes wobble { 50% { transform: rotate(12deg) translateY(-4px); } } .scatter { transform-box: fill-box; transform-origin: center; animation: scatter 3s ease-in-out var(--d) infinite; } @keyframes scatter { 50% { transform: translate(6px, -5px) rotate(8deg); } } /* 場面2 ラフ */ .sk-ring { fill: none; stroke: var(--coral); stroke-width: 5; } .sk-line { fill: none; stroke: var(--gold); stroke-width: 3; stroke-dasharray: 1; opacity: .85; } .chip-live { fill: rgba(120,217,179,.2); stroke: var(--sea); stroke-width: 2; } .chip-dev { fill: rgba(24,174,202,.18); stroke: var(--cyan); stroke-width: 2; } .chip-prep { fill: rgba(242,177,52,.16); stroke: var(--gold); stroke-width: 2; } .chip-idea, .chip-plan { fill: rgba(255,255,255,.08); stroke: #9fc3d8; stroke-width: 2; } .sk-chip .ico-s { color: #fff; } .st-live { fill: var(--sea); } .st-dev { fill: var(--cyan); } .st-prep { fill: var(--gold); } .st-idea, .st-plan { fill: #cfe3ef; } /* 場面3 循環 */ .ring { fill: none; stroke: rgba(120,217,179,.45); stroke-width: 4; stroke-dasharray: 1; } .flow-dot { filter: drop-shadow(0 0 6px currentColor); } /* 場面4 棒グラフ */ .bar { fill: url(#g-bar); transform-box: fill-box; transform-origin: bottom; transform: scaleY(0); transition: transform 1s calc(var(--d) + .1s) cubic-bezier(.2,.8,.2,1); } .bar.hot { fill: var(--gold); } .show .bar { transform: scaleY(1); } .gauge { stroke-dasharray: 0 100; transition: stroke-dasharray 1.6s .4s ease-out; } .show .gauge { stroke-dasharray: var(--p) 100; } /* 場面5 パケット（AI → 人へ流れる） */ .packet { opacity: 0; } .show .packet { animation: packet 2.4s var(--d) linear infinite; } @keyframes packet { 0% { opacity: 0; transform: translate(300px, 150px); } 10% { opacity: 1; } 90% { opacity: 1; } 100% { opacity: 0; transform: translate(372px, 150px); } } /* 場面6 取り組み一覧 */ .tile-bg { fill: var(--card); stroke: var(--line-d); stroke-width: 3; transition: fill .6s, stroke .6s; } .tile.show .tile-bg { fill: #123f63; stroke: var(--sea); } .tile-tx { fill: #fff; } .tile.show { animation: tileGlow 1.2s var(--d) ease-out both; } @keyframes tileGlow { 0% { filter: drop-shadow(0 0 0 transparent); } 40% { filter: drop-shadow(0 0 18px rgba(120,217,179,.9)); } 100% { filter: none; } } /* 場面7 流れ */ .stream { fill: none; stroke: var(--sea); stroke-width: 4; } /* 場面8 道 */ .road { fill: none; stroke: url(#g-road); stroke-width: 14; stroke-linecap: round; transition-duration: 2.2s; } .flag { transform-box: view-box; } /* 字幕 */ .stage-cap { display: grid; grid-template-columns: auto 1fr; gap: 2px 12px; align-items: baseline; padding: 14px 20px 16px; background: linear-gradient(180deg, #071a2d, #06182a); border-top: 1px solid rgba(255,255,255,.08); } .cap-no { font-family: var(--f-num); font-weight: 600; font-size: .8rem; color: var(--sea); letter-spacing: .1em; } .cap-title { font-family: var(--f-head); font-weight: 900; font-size: .95rem; color: #fff; } .cap-tx { grid-column: 1 / -1; margin: 4px 0 0; min-height: 3.4em; color: #fff; font-size: clamp(1rem, 1.9vw, 1.2rem); line-height: 1.7; font-weight: 600; } /* 操作バー */ .stage-ctrl { display: flex; align-items: center; gap: 10px; margin-top: 16px; flex-wrap: wrap; } .c-btn { width: 44px; height: 44px; border-radius: 50%; border: 1px solid rgba(255,255,255,.2); background: rgba(255,255,255,.06); display: grid; place-items: center; flex: none; transition: background .2s; } .c-btn:hover { background: rgba(255,255,255,.14); } .c-btn svg, .c-play svg { width: 22px; height: 22px; fill: none; stroke: #fff; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; } .c-play { display: inline-flex; align-items: center; gap: 10px; height: 52px; padding: 0 22px 0 16px; border: 0; border-radius: 999px; background: var(--gold); color: var(--ink); font-weight: 900; box-shadow: 0 8px 26px rgba(242,177,52,.35); flex: none; transition: transform .2s; } .c-play:hover { transform: translateY(-1px); } .c-play svg { fill: var(--ink); stroke: none; } .c-play small { margin-left: 6px; font-weight: 700; opacity: .75; font-size: .8em; } .i-pause { display: none; } .is-playing .i-play { display: none; } .is-playing .i-pause { display: block; } .c-bar { position: relative; flex: 1 1 180px; height: 8px; border-radius: 99px; background: rgba(255,255,255,.14); cursor: pointer; min-width: 120px; } .c-bar::before { content: ""; position: absolute; inset: -12px 0; } .c-fill { position: absolute; inset: 0 auto 0 0; width: 0; border-radius: 99px; background: linear-gradient(90deg, var(--cyan), var(--sea)); } .c-bar i { position: absolute; top: -3px; width: 2px; height: 14px; background: rgba(255,255,255,.35); } .c-time { font-family: var(--f-num); font-size: .86rem; color: var(--txt-d); min-width: 88px; text-align: right; } .stage-chips { list-style: none; margin: 14px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; } .stage-chips button { border: 1px solid rgba(255,255,255,.16); background: transparent; color: var(--txt-d); border-radius: 999px; padding: 6px 14px; font-size: .84rem; font-weight: 700; transition: all .2s; } .stage-chips button b { font-family: var(--f-num); color: var(--sea); margin-right: 6px; font-weight: 600; } .stage-chips button:hover { border-color: var(--sea); color: #fff; } .stage-chips button.on { background: var(--sea); color: var(--ink); border-color: var(--sea); } .stage-chips button.on b { color: var(--ink); } .stage-note { font-size: .8rem; color: #8fb0c4; margin: 14px 0 0; } @media (max-width: 640px) { .v-hero { padding-top: 78px; } .stage-frame { border-radius: 14px; } .stage-cap { padding: 12px 14px 14px; } .c-play { order: -1; flex: 1 1 100%; justify-content: center; } .c-bar { order: 2; flex: 1 1 100%; } .c-time { order: 3; margin-left: auto; } .stage-chips { flex-wrap: nowrap; overflow-x: auto; padding-bottom: 6px; scrollbar-width: none; } .stage-chips li { flex: none; } } /* ---------- 章の共通 ---------- */ .sec { position: relative; padding: 96px 0; } .sec--paper { background: var(--paper); color: var(--ink); } .sec--paper .sec-no { color: var(--blue); } .sec--night { background: linear-gradient(180deg, #082339, var(--night)); color: #fff; } .sec--deep { background: radial-gradient(900px 500px at 20% 0%, rgba(24,174,202,.16), transparent 70%), #051729; color: #fff; } .sec-h { font-family: var(--f-head); font-weight: 900; font-size: clamp(1.7rem, 4.2vw, 2.8rem); line-height: 1.35; margin: 0 0 18px; letter-spacing: .01em; } .sec-lead { font-size: clamp(1rem, 1.6vw, 1.1rem); max-width: 46em; margin: 0 0 40px; } .sec--night .sec-lead, .sec--deep .sec-lead { color: var(--txt-d); } .sec-lead strong { color: var(--gold); } .sec--paper .sec-lead strong { color: #c77d00; } .sec-lead.center { margin-inline: auto; text-align: center; } .sec-sub { color: var(--muted); max-width: 46em; } .sub-h { font-family: var(--f-head); font-weight: 900; font-size: 1.3rem; margin: 64px 0 20px; padding-left: 14px; border-left: 5px solid var(--cyan); line-height: 1.4; } .src { font-size: .8rem; color: var(--muted); margin: 18px 0 0; } .sec--night .src, .sec--deep .src { color: #8fb0c4; } .note-inline { display: inline-block; font-size: .86rem; background: rgba(11,114,185,.08); border-radius: 10px; padding: 8px 14px; margin: -20px 0 32px; color: var(--muted); } /* 状態チップ（HTML） */ .st { display: inline-block; font-size: .72rem; font-weight: 800; padding: 2px 10px; border-radius: 999px; white-space: nowrap; line-height: 1.7; vertical-align: middle; } span.st-live { background: #d7f5e8; color: #17694a; } span.st-dev { background: #d4f1f7; color: #0b6179; } span.st-prep { background: #fcebc4; color: #7a5100; } span.st-plan { background: #e4ebf5; color: #37506b; } span.st-idea { background: #efe7f7; color: #5b3f7a; } /* 見えたら動く（共通） */ .reveal { opacity: 0; transform: translateY(24px); transition: opacity .8s var(--d, 0s), transform .8s var(--d, 0s) cubic-bezier(.2,.8,.2,1); } .reveal.in { opacity: 1; transform: none; } /* ---------- 02 なぜ ---------- */ .why-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; } .why-item { background: #fff; border-radius: var(--radius); padding: 28px 24px; box-shadow: 0 10px 30px rgba(16,43,63,.07); position: relative; } .why-no { font-family: var(--f-num); font-weight: 800; font-size: 2.4rem; color: var(--coral); line-height: 1; } .why-item h3 { font-family: var(--f-head); font-weight: 900; font-size: 1.25rem; margin: 10px 0 8px; } .why-item p { margin: 0; color: var(--muted); font-size: .95rem; } .why-item .why-ans { margin-top: 16px; padding-top: 14px; border-top: 1px dashed rgba(16,43,63,.18); color: var(--ink); font-weight: 700; } .why-ans span { display: block; font-size: .74rem; color: var(--leaf); letter-spacing: .1em; } .big-quote { font-family: var(--f-head); font-weight: 900; text-align: center; font-size: clamp(1.7rem, 4.6vw, 3rem); margin: 72px 0 18px; line-height: 1.4; } .big-quote em { font-style: normal; color: var(--blue); background: linear-gradient(transparent 62%, rgba(242,177,52,.45) 62%); } #why .sec-sub { margin: 0 auto; text-align: center; } /* ---------- 03 ラフ ---------- */ .sketch { display: grid; grid-template-columns: 1.15fr 1fr; gap: 36px; align-items: start; } .sketch-photo { position: sticky; top: 24px; margin: 0; transform: rotate(-1.2deg); background: #f5f1e8; padding: 10px; border-radius: 8px; box-shadow: 0 24px 60px rgba(0,0,0,.4); } .sketch-photo img { border-radius: 4px; } .sketch-over { position: absolute; inset: 10px; width: calc(100% - 20px); height: auto; } .sk-e { fill: none; stroke: var(--coral); stroke-width: 7; stroke-dasharray: 1; stroke-dashoffset: 1; transition: stroke-dashoffset 1.2s var(--d) ease-out; } .sketch.in .sk-e { stroke-dashoffset: 0; } .sketch-photo figcaption { font-size: .78rem; color: var(--muted); padding: 8px 4px 0; } .sketch-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; } .sketch-list li { display: grid; grid-template-columns: 1fr auto; gap: 2px 10px; align-items: center; background: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.08); border-radius: 14px; padding: 10px 14px; } .sk-from { grid-column: 1 / -1; font-size: .78rem; color: #8fb0c4; font-family: var(--f-head); } .sk-arrow { display: none; } .sk-to { font-weight: 800; font-family: var(--f-head); font-size: 1.02rem; } .sk-to small { display: block; font-weight: 600; font-size: .8rem; color: var(--txt-d); font-family: var(--f-body); } /* ---------- 04 循環 ---------- */ .cycle { display: grid; grid-template-columns: 1.2fr 1fr; gap: 40px; align-items: center; } .cycle-svg { width: 100%; max-width: 560px; margin-inline: auto; overflow: visible; font-family: var(--f-head); } .cy-ring { fill: none; stroke: rgba(255,140,102,.35); stroke-width: 3; stroke-dasharray: 6 8; } .cy-ring2 { fill: none; stroke: rgba(24,174,202,.3); stroke-width: 2; stroke-dasharray: 3 8; } .cy-node circle { fill: #fff; stroke: var(--cyan); stroke-width: 3; } .cy-node .ico-s { color: var(--blue); } .cy-node { opacity: 0; transition: opacity .6s var(--d); } .cycle.in .cy-node { opacity: 1; } .cy-h { font-weight: 900; font-size: 21px; fill: var(--ink); } .cy-s { font-weight: 700; font-size: 14px; fill: var(--muted); } .cy-core circle { fill: var(--gold); } .cy-core .ico-s { color: var(--ink); } .cy-core .cy-s { fill: var(--ink); } .cycle-legend { list-style: none; margin: 0; padding: 0; display: grid; gap: 16px; } .cycle-legend li { background: #fff; border-radius: 14px; padding: 14px 18px; font-size: .95rem; box-shadow: 0 6px 20px rgba(16,43,63,.06); } .cycle-legend i { display: inline-block; width: 12px; height: 12px; border-radius: 50%; margin-right: 8px; vertical-align: 1px; } /* ---------- 05 実績 ---------- */ .proof { display: grid; grid-template-columns: 1.5fr 1fr; gap: 28px; align-items: stretch; } .chart { margin: 0; background: rgba(255,255,255,.04); border: 1px solid rgba(255,255,255,.08); border-radius: var(--radius); padding: 18px 18px 14px; } .chart svg { width: 100%; height: auto; display: block; font-family: var(--f-num); } .chart figcaption { font-size: .78rem; color: #8fb0c4; margin-top: 8px; } .ch-grid { stroke: rgba(255,255,255,.08); } .ch-ax { fill: #8fb0c4; font-size: 13px; } .ch-ax.is-em { fill: #fff; font-weight: 600; } .ch-bar { fill: #1d5277; transform-box: fill-box; transform-origin: bottom; transform: scaleY(0); transition: transform 1s var(--d) cubic-bezier(.2,.8,.2,1); } .ch-bar.is-base { fill: var(--cyan); } .ch-bar.is-hot { fill: var(--gold); } .proof.in .ch-bar { transform: scaleY(1); } .ch-line { fill: none; stroke: var(--sea); stroke-width: 3; stroke-dasharray: 1; stroke-dashoffset: 1; transition: stroke-dashoffset 1.8s .6s ease-out; } .proof.in .ch-line { stroke-dashoffset: 0; } .ch-v { fill: #fff; font-size: 16px; font-weight: 600; opacity: 0; transition: opacity .6s 1.6s; } .ch-v.is-hot { fill: var(--gold); font-size: 22px; font-weight: 800; } .proof.in .ch-v { opacity: 1; } .proof-side { display: grid; gap: 18px; } .x32 { background: linear-gradient(135deg, rgba(242,177,52,.18), rgba(242,177,52,.04)); border: 1px solid rgba(242,177,52,.35); border-radius: var(--radius); padding: 20px 24px; font-family: var(--f-head); font-weight: 900; } .x32 b { font-family: var(--f-num); font-size: 4.6rem; line-height: 1; color: var(--gold); margin: 0 4px; } .x32 span { font-size: 1.3rem; } .x32 small { display: block; font-size: .82rem; font-weight: 700; color: var(--txt-d); margin-top: 6px; font-family: var(--f-body); } .inflow { background: rgba(255,255,255,.04); border: 1px solid rgba(255,255,255,.08); border-radius: var(--radius); padding: 18px 20px; } .inflow-h { margin: 0 0 10px; font-weight: 800; font-size: .88rem; } .if-row { display: grid; grid-template-columns: 6.2em 1fr 3.4em; gap: 8px; align-items: center; font-size: .82rem; margin: 5px 0; } .if-row i { height: 10px; background: rgba(255,255,255,.08); border-radius: 99px; overflow: hidden; } .if-row em { font-style: normal; font-family: var(--f-num); text-align: right; color: var(--txt-d); } .grow { display: block; height: 100%; width: 0; border-radius: 99px; transition: width 1.2s var(--d, 0s) cubic-bezier(.2,.8,.2,1); } .in .grow { width: var(--w); } .inflow-note { font-size: .84rem; margin: 12px 0 0; color: var(--txt-d); } .inflow-note strong { color: var(--coral); } .stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; margin-top: 28px; } .stat { background: rgba(255,255,255,.04); border: 1px solid rgba(255,255,255,.08); border-radius: var(--radius); padding: 20px; } .stat-v { margin: 0; font-family: var(--f-num); } .stat-v b { font-size: 2.3rem; font-weight: 800; color: var(--sea); } .stat-v span { font-family: var(--f-head); font-weight: 700; margin-left: 4px; font-size: .9rem; } .stat-h { margin: 4px 0 0; font-weight: 800; } .stat-s { margin: 4px 0 0; font-size: .8rem; color: #8fb0c4; line-height: 1.6; } /* ---------- 06 AI ---------- */ .how { background: #fff; border-radius: var(--radius); padding: 24px; box-shadow: 0 10px 30px rgba(16,43,63,.07); } .how-svg { width: 100%; height: auto; display: block; font-family: var(--f-head); overflow: visible; } .how-pipe { stroke: #cfe3ef; stroke-width: 10; stroke-linecap: round; fill: none; } .how-h { font-weight: 900; font-size: 26px; } .how-pk { fill: var(--cyan); opacity: 0; } .how.in .how-pk { animation: howPk 3.6s var(--d) linear infinite; } @keyframes howPk { 0% { opacity: 0; transform: translate(150px, 142px); } 6% { opacity: 1; } 40% { transform: translate(400px, 142px); opacity: 1; fill: var(--cyan); } 46% { transform: translate(470px, 142px); opacity: 0; } 54% { transform: translate(540px, 142px); opacity: 0; fill: var(--leaf); } 60% { opacity: 1; fill: var(--leaf); } 94% { opacity: 1; fill: var(--leaf); transform: translate(800px, 142px); } 100% { opacity: 0; transform: translate(810px, 142px); } } .tbl { overflow-x: auto; margin-top: 28px; border-radius: var(--radius); background: #fff; box-shadow: 0 10px 30px rgba(16,43,63,.06); } table { width: 100%; border-collapse: collapse; font-size: .92rem; } th, td { text-align: left; padding: 12px 16px; border-bottom: 1px solid rgba(16,43,63,.08); vertical-align: top; } th { font-size: .8rem; color: var(--muted); font-weight: 800; background: #f0f7fa; white-space: nowrap; } td:first-child { font-weight: 800; } tr:last-child td { border-bottom: 0; } .human { display: flex; gap: 18px; align-items: flex-start; margin-top: 24px; padding: 22px 24px; background: linear-gradient(135deg, #fff6e0, #fffaf0); border-radius: var(--radius); border: 1px solid rgba(242,177,52,.4); } .human-i { width: 48px; height: 48px; flex: none; fill: none; stroke: #c77d00; stroke-width: 3; stroke-linecap: round; } .human-h { font-family: var(--f-head); font-weight: 900; margin: 0 0 4px; font-size: 1.1rem; } .human p { margin: 0; } /* ---------- 07 取り組み ---------- */ .legend { list-style: none; margin: -20px 0 28px; padding: 0; display: flex; gap: 8px; flex-wrap: wrap; } .pj-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; } .pj { background: linear-gradient(180deg, #0e2d49, #0a2540); border: 1px solid rgba(255,255,255,.08); border-radius: var(--radius); overflow: hidden; display: flex; flex-direction: column; } .pj.is-on { border-color: var(--gold); box-shadow: 0 0 0 1px var(--gold), 0 14px 40px rgba(242,177,52,.18); } .pj-art { aspect-ratio: 240 / 150; background: radial-gradient(circle at 50% 40%, #134670, #0b2a44 75%); } .art { width: 100%; height: 100%; display: block; font-family: var(--f-head); } .art-t { font-size: 11px; font-weight: 700; fill: #cfe3ef; } .art-t--dk { fill: var(--ink); } .art-ln { fill: none; stroke: var(--gold); stroke-width: 3; stroke-linecap: round; } .pj-body { padding: 18px 20px 20px; display: flex; flex-direction: column; flex: 1; } .pj-meta { display: flex; align-items: center; gap: 8px; margin: 0; font-size: .74rem; } .pj-no { font-family: var(--f-num); font-weight: 800; color: var(--sea); } .pj-en { font-family: var(--f-num); letter-spacing: .12em; color: #8fb0c4; font-weight: 600; flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .pj-h { font-family: var(--f-head); font-weight: 900; font-size: 1.3rem; margin: 6px 0 4px; line-height: 1.4; } .pj-lead { margin: 0 0 10px; color: #fff; font-weight: 700; font-size: .95rem; } .pj-facts { margin: 0 0 14px; padding: 0; list-style: none; font-size: .86rem; color: var(--txt-d); line-height: 1.65; } .pj-facts li { padding-left: 14px; position: relative; margin: 3px 0; } .pj-facts li::before { content: ""; position: absolute; left: 0; top: .66em; width: 6px; height: 6px; border-radius: 50%; background: var(--sea); } .pj-foot { margin-top: auto; display: flex; align-items: center; gap: 12px; flex-wrap: wrap; } .pj-play { position: relative; display: inline-flex; align-items: center; gap: 8px; border: 0; background: rgba(255,255,255,.08); border-radius: 999px; padding: 6px 16px 6px 6px; font-weight: 800; font-size: .88rem; color: #fff; } .pj-play:hover { background: rgba(255,255,255,.14); } .pj-play small { color: #8fb0c4; font-weight: 600; margin-left: 2px; } .pj-play > svg:not(.pj-ring) { position: absolute; left: 15px; width: 18px; height: 18px; fill: var(--gold); } .pj-ring { width: 36px; height: 36px; transform: rotate(-90deg); flex: none; } .pj-ring circle { fill: none; stroke: rgba(242,177,52,.35); stroke-width: 2.5; } .pj-ring .pj-prog { stroke: var(--gold); stroke-dasharray: 0 100; } .pj-link { font-size: .86rem; font-weight: 700; color: var(--sea); text-decoration: none; } .pj-link span { margin-left: 4px; } .pj-link:hover { text-decoration: underline; } .pj-cap { margin: 10px 0 0; font-size: .86rem; color: #fff; min-height: 0; line-height: 1.6; } .pj-cap:empty { display: none; } /* プロジェクトの小アニメ（.pj.run で開始・6秒ループ） */ .pj-art .k, .pj-art .art-pin, .pj-art .art-step, .pj-art .art-join, .pj-art .art-stack, .pj-art .art-slide, .pj-art .art-trash { transform-box: fill-box; transform-origin: center; } .pj.run .k { animation: artIn 6s var(--d, 0s) infinite both; } @keyframes artIn { 0% { opacity: 0; transform: translateY(8px) scale(.85); } 12%, 100% { opacity: 1; transform: none; } } /* ループは3回まで。終わったら完成形で止まる（WCAG 2.2.2） */ .pj.run .pj-art * { animation-iteration-count: 3 !important; animation-fill-mode: both; } /* 止まっているときは完成形を見せる（何の図か分かるように） */ .art-paper { transform-box: fill-box; } .pj.run .art-paper { animation: paperGo 6s infinite; } @keyframes paperGo { 0%, 5% { transform: none; opacity: 1; } 22%, 100% { transform: translateX(8px) rotate(4deg); opacity: .55; } } .art-ok { transition: fill .3s; } .pj.run .art-ok { animation: okFill 6s 1.1s infinite; } @keyframes okFill { 0% { fill: #e3f0f5; } 6%, 100% { fill: #bdeed8; } } .pj.run .art-star { animation-name: artIn, twirl; animation-duration: 6s, 3s; animation-iteration-count: infinite; } @keyframes twirl { 50% { transform: rotate(20deg) scale(1.1); } } .art-star { fill: var(--gold); stroke: none; } .art-hop { transform: translate(195px, 45px); } .pj.run .art-hop { animation: hop 6s infinite; } @keyframes hop { 0%, 8% { transform: translate(45px, 123px); } 18%, 26% { transform: translate(95px, 97px); } 36%, 44% { transform: translate(145px, 71px); } 54%, 100% { transform: translate(195px, 45px); } } .pj.run .art-pin { animation: pin 6s var(--d) infinite; } @keyframes pin { 0% { opacity: 0; translate: 0 -30px; } 8%, 100% { opacity: 1; translate: 0 0; } } .art-step circle { fill: #12395b; stroke: #78d9b3; stroke-width: 3; transition: fill .3s; } .pj.run .art-step circle { animation: stepOn 6s var(--d) infinite; } @keyframes stepOn { 0% { fill: #12395b; } 6%, 100% { fill: #78d9b3; } } .art-run { transform: translateX(216px); } .pj.run .art-run { animation: run 6s infinite; } @keyframes run { 0% { transform: translateX(24px); } 45%, 100% { transform: translateX(216px); } } .pj.run .art-join { animation: join 6s var(--d) infinite; } @keyframes join { 0% { transform: none; opacity: 0; } 8% { opacity: 1; transform: none; } 45%, 100% { transform: translate(var(--x), var(--y)); opacity: 1; } } .art-stack { fill: var(--gold); } .pj.run .art-stack { animation: stack 6s var(--d) infinite; } @keyframes stack { 0% { opacity: 0; transform: translateY(-40px); } 8%, 100% { opacity: 1; transform: none; } } .art-grow { transform-box: fill-box; transform-origin: bottom center; } .art-join { transform: translate(var(--x), var(--y)); } .art-ok { fill: #bdeed8; } .pj.run .art-grow { animation: grow 6s infinite; } @keyframes grow { 0%, 30% { transform: scale(0); } 50%, 100% { transform: scale(1); } } .art-heart { transform: translate(150px, 90px); opacity: 0; } .pj.run .art-heart { animation: heart 2.1s var(--d) infinite; } @keyframes heart { 0% { transform: translate(150px, 90px) scale(.6); opacity: 0; } 20% { opacity: 1; } 100% { transform: translate(162px, 30px) scale(1.2); opacity: 0; } } .pj.run .art-slide { animation: slideIn 6s var(--d) infinite; } @keyframes slideIn { 0% { opacity: 0; transform: translateX(30px); } 8%, 100% { opacity: 1; transform: none; } } .pj.run .art-sun { animation: sun 4s ease-in-out infinite; transform-box: fill-box; transform-origin: center; } @keyframes sun { 50% { transform: scale(1.12); } } .pj.run .art-wave { animation: wave 3s linear infinite; } .pj.run .art-wave--2 { animation-duration: 4.5s; animation-direction: reverse; } @keyframes wave { to { transform: translateX(-60px); } } .pj.run .art-bob { animation: bob 1.6s var(--d) ease-in-out infinite; } @keyframes bob { 50% { transform: translateY(-5px); } } .art-fan { transform: translate(120px, 70px) rotate(var(--r)); } .pj.run .art-fan { animation: fan 6s var(--d) infinite; } @keyframes fan { 0%, 5% { transform: translate(120px, 70px) rotate(0); } 25%, 100% { transform: translate(120px, 70px) rotate(var(--r)) translateY(-4px); } } .pj.run .art-trash { animation: trash 6s var(--d) infinite; } @keyframes trash { 0%, 20% { opacity: 1; transform: none; } 30%, 100% { opacity: 0; transform: scale(.2) translateY(-20px); } } .art-hop2 { transform: translate(186px, 128px); } .pj.run .art-hop2 { animation: hop2 6s infinite; } @keyframes hop2 { 0% { transform: translate(20px, 116px); } 20% { transform: translate(60px, 104px); } 40% { transform: translate(100px, 124px); } 60% { transform: translate(150px, 100px); } 75%, 100% { transform: translate(186px, 128px); } } /* ---------- 08 百日 ---------- */ .goals { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; } .goal { background: #fff; border-radius: var(--radius); padding: 22px; box-shadow: 0 10px 30px rgba(16,43,63,.07); border-top: 5px solid var(--gold); } .goal:first-child { border-top-color: var(--leaf); } .goal-v { margin: 0; font-family: var(--f-num); } .goal-v b { font-size: 2.6rem; font-weight: 800; color: var(--ink); line-height: 1.1; } .goal-v span { font-family: var(--f-head); font-weight: 900; margin-left: 4px; } .goal-h { margin: 6px 0 0; font-weight: 800; } .goal-s { margin: 2px 0 0; font-size: .82rem; color: var(--muted); } .basis { background: #fff; border-radius: var(--radius); padding: 24px; box-shadow: 0 10px 30px rgba(16,43,63,.07); } .basis-svg { width: 100%; height: auto; display: block; font-family: var(--f-head); } .bs-box { fill: #f0f7fa; stroke: #cfe3ef; stroke-width: 2; } .bs-a { font-weight: 900; font-size: 19px; fill: var(--ink); } .bs-b { font-weight: 900; font-size: 20px; fill: var(--blue); } .bs-c { font-weight: 700; font-size: 14px; fill: var(--muted); } .bs-big { font-weight: 900; font-size: 34px; fill: var(--ink); } .bs-gold { fill: #c77d00; font-size: 40px; } .bs-sum { fill: #fff6e0; stroke: var(--gold); stroke-width: 4; } .bs-flow { fill: none; stroke: var(--sea); stroke-width: 5; stroke-dasharray: 1; stroke-dashoffset: 1; transition: stroke-dashoffset 1.2s var(--d) ease-out; } .basis.in .bs-flow { stroke-dashoffset: 0; } .miles { background: #fff; border-radius: var(--radius); padding: 30px 28px 22px; box-shadow: 0 10px 30px rgba(16,43,63,.07); } .mile-bar { height: 10px; border-radius: 99px; background: #e3eef3; margin: 0 8px; } .mile-bar .grow { background: linear-gradient(90deg, var(--leaf), var(--gold)); transition-duration: 2.4s; } .mile-list { list-style: none; margin: 0; padding: 0; position: relative; display: grid; grid-template-columns: repeat(5, 1fr); gap: 10px; } .mile-list li { position: relative; padding-top: 22px; font-size: .86rem; line-height: 1.55; } .mile-list li::before { content: ""; position: absolute; top: -16px; left: 8px; width: 22px; height: 22px; border-radius: 50%; background: #fff; border: 4px solid var(--gold); } .mile-list li:first-child::before { border-color: var(--leaf); } .ml-d { display: block; font-family: var(--f-head); font-weight: 900; font-size: 1.05rem; } .ml-d small { font-family: var(--f-num); font-weight: 600; color: var(--muted); margin-left: 6px; font-size: .8rem; } .ml-a { display: block; font-weight: 800; color: var(--blue); } .ml-b { display: block; color: var(--muted); } .miles-note { font-size: .84rem; color: var(--muted); margin: 18px 0 0; } .accts { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; margin-top: 20px; } .acct { background: #fff; border-radius: var(--radius); padding: 18px; box-shadow: 0 10px 30px rgba(16,43,63,.07); } .acct-th { margin: 0; font-size: .8rem; color: var(--muted); font-weight: 700; } .acct-name { margin: 0 0 12px; font-family: var(--f-head); font-weight: 900; font-size: 1.1rem; } .acct-pair { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; } .acct-pair figure { margin: 0; text-align: center; } .acct-pair img, .acct-human { width: 100%; aspect-ratio: 1; border-radius: 50%; object-fit: cover; box-shadow: 0 6px 16px rgba(16,43,63,.14); transition: transform .4s; } .acct:hover .acct-pair img { transform: translateY(-4px) rotate(-2deg); } .acct-human { display: grid; place-items: center; background: #e9f3f7; } .acct-human svg { width: 50%; fill: none; stroke: var(--blue); stroke-width: 3; stroke-linecap: round; } .acct-pair figcaption { font-size: .74rem; color: var(--muted); line-height: 1.45; margin-top: 6px; } .acct-pair figcaption b { display: block; color: var(--ink); font-size: .9rem; font-family: var(--f-head); } .plans { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; } .plan { background: #fff; border-radius: var(--radius); padding: 20px; box-shadow: 0 10px 30px rgba(16,43,63,.07); } .plan:nth-child(1) { border-top: 5px solid #9fd9ef; } .plan:nth-child(2) { border-top: 5px solid var(--sea); } .plan:nth-child(3) { border-top: 5px solid var(--cyan); } .plan:nth-child(4) { border-top: 5px solid var(--gold); } .plan-nm { margin: 0; font-family: var(--f-head); font-weight: 900; font-size: 1.15rem; } .plan-pr { margin: 2px 0 10px; color: var(--muted); font-size: .86rem; } .plan-pr b { font-family: var(--f-num); font-size: 1.7rem; color: var(--ink); } .plan ul { margin: 0; padding-left: 1.1em; font-size: .84rem; color: var(--muted); line-height: 1.65; } /* ---------- 09 ロードマップ ---------- */ .road { position: relative; } .road-svg { width: 100%; height: 120px; display: block; } .road-path { fill: none; stroke: var(--sea); stroke-width: 6; stroke-linecap: round; stroke-dasharray: 1; stroke-dashoffset: 1; transition: stroke-dashoffset 2.4s ease-out; } .road.in .road-path { stroke-dashoffset: 0; } .road-list { list-style: none; margin: 10px 0 0; padding: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px 16px; } .road-list li { background: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.1); border-radius: 16px; padding: 16px 14px; position: relative; } .road-list li::before { content: ""; position: absolute; top: -9px; left: 16px; width: 16px; height: 16px; background: var(--gold); border-radius: 3px 3px 3px 0; transform: rotate(-8deg); } .road-list li:first-child::before { background: var(--sea); } .rd-t { display: block; font-family: var(--f-num); font-weight: 800; color: var(--gold); font-size: .95rem; } .rd-t em { font-style: normal; font-family: var(--f-body); font-size: .68rem; background: rgba(120,217,179,.2); color: var(--sea); padding: 1px 8px; border-radius: 99px; margin-left: 6px; vertical-align: 2px; } .rd-h { display: block; font-family: var(--f-head); font-weight: 900; font-size: 1.05rem; margin: 6px 0 4px; line-height: 1.45; } .rd-s { display: block; font-size: .8rem; color: var(--txt-d); line-height: 1.6; } /* ---------- 10 助成 ---------- */ .grant-head { display: flex; align-items: center; justify-content: space-between; gap: 20px; background: #fff; border-radius: var(--radius); padding: 22px 26px; box-shadow: 0 10px 30px rgba(16,43,63,.06); } .grant-head dl, .org dl { margin: 0; display: grid; gap: 6px; } .grant-head dl div, .org dl div { display: grid; grid-template-columns: 6.5em 1fr; gap: 10px; } .grant-head dt, .org dt { font-size: .8rem; color: var(--muted); font-weight: 800; padding-top: 3px; } .grant-head dd, .org dd { margin: 0; font-weight: 700; } .grant-head img { flex: none; } .grant-table td b { font-family: var(--f-num); font-size: 1.1rem; } .split { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; } .split-card { background: #fff; border-radius: var(--radius); padding: 20px 22px; border: 2px dashed #cfe3ef; } .split-h { margin: 0 0 6px; font-family: var(--f-head); font-weight: 900; font-size: 1.08rem; } .split-card p:last-child { margin: 0; font-size: .92rem; color: var(--muted); } /* ---------- 11 おわり ---------- */ .sec--end { padding-bottom: 72px; background: radial-gradient(900px 500px at 50% 0%, rgba(24,174,202,.22), transparent 70%), var(--night); } .end-q { font-family: var(--f-head); font-weight: 900; font-size: clamp(1.9rem, 5.2vw, 3.4rem); text-align: center; line-height: 1.35; margin: 0 0 14px; } .end-q em { font-style: normal; color: var(--gold); } .cta { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; margin: 0 0 48px; } .cta a { display: flex; flex-direction: column; align-items: center; gap: 6px; text-decoration: none; background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.12); border-radius: var(--radius); padding: 22px 12px; font-family: var(--f-head); font-weight: 900; font-size: 1.08rem; transition: transform .25s, background .25s; } .cta a:hover { transform: translateY(-3px); background: rgba(255,255,255,.12); } .cta svg { width: 40px; height: 40px; fill: none; stroke: var(--sea); stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; } .cta small { font-size: .78rem; color: #8fb0c4; font-weight: 700; } .script { background: rgba(255,255,255,.04); border: 1px solid rgba(255,255,255,.1); border-radius: var(--radius); padding: 16px 22px; margin-bottom: 36px; } .script summary { cursor: pointer; font-weight: 800; } .script h3 { font-family: var(--f-head); font-size: 1rem; color: var(--sea); margin: 20px 0 4px; } .script p { margin: 0; color: var(--txt-d); font-size: .92rem; } .org { display: flex; align-items: center; justify-content: space-between; gap: 20px; background: #fff; color: var(--ink); border-radius: var(--radius); padding: 22px 26px; } .v-foot { background: #04101e; color: #8fb0c4; font-size: .78rem; text-align: center; padding: 22px 16px 30px; } .v-foot p { margin: 2px 0; } /* ---------- レスポンシブ ---------- */ @media (max-width: 960px) { .pj-grid { grid-template-columns: repeat(2, 1fr); } .road-list { grid-template-columns: repeat(2, 1fr); } .stats, .goals, .accts, .plans { grid-template-columns: repeat(2, 1fr); } .sketch, .cycle, .proof { grid-template-columns: 1fr; } .sketch-photo { position: relative; top: 0; } } @media (max-width: 640px) { body { font-size: 15px; } .sec { padding: 68px 0; } .sec-lead { margin-bottom: 28px; } .why-grid, .pj-grid, .split, .road-list { grid-template-columns: 1fr; } .stats, .goals, .cta { grid-template-columns: 1fr 1fr; gap: 10px; } .accts, .plans { grid-template-columns: 1fr; } .stat, .goal { padding: 16px; } .stat-v b { font-size: 1.8rem; } .goal-v b { font-size: 2rem; } .mile-list { grid-template-columns: 1fr; gap: 14px; } .mile-bar { display: none; } .mile-list { border-left: 4px solid #e3eef3; margin-left: 10px; padding-left: 0; } .mile-list li { padding: 0 0 0 26px; } .mile-list li::before { top: 2px; left: -13px; } .road-svg { display: none; } .grant-head, .org { flex-direction: column; align-items: flex-start; } .x32 b { font-size: 3.6rem; } table { font-size: .84rem; } th, td { padding: 10px 12px; } .basis { padding: 14px; } .note-inline { margin-top: -10px; } } /* プロジェクトの画面写真・根拠リスト（スマホ用） */ .pj-shot { margin: 0 0 14px; border-radius: 10px; overflow: hidden; border: 1px solid rgba(255,255,255,.12); } .pj-shot img { width: 100%; aspect-ratio: 16 / 7; object-fit: cover; object-position: top; } .basis-list { display: none; list-style: none; margin: 0; padding: 0; } .basis-list li { display: grid; grid-template-columns: 1fr auto; gap: 0 10px; padding: 10px 0; border-bottom: 1px dashed #cfe3ef; } .basis-list b { font-family: var(--f-head); } .basis-list span { font-weight: 900; color: var(--blue); white-space: nowrap; } .basis-list small { grid-column: 1 / -1; color: var(--muted); font-size: .8rem; } .basis-list .basis-sum { border: 0; padding-top: 14px; } .basis-list .basis-sum span { color: #c77d00; font-size: 1.3rem; } @media (max-width: 640px) { .basis-svg { display: none; } .basis-list { display: block; } .how-h { font-size: 40px; } .cy-h { font-size: 26px; } .cy-node .cy-s { display: none; } .ch-ax { font-size: 28px; } .chart .m-hide, .cy-core .cy-s { display: none; } .ch-v { font-size: 22px; } .ch-v.is-hot { font-size: 28px; } } /* 動きを減らす設定：完成形で静止 */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation: none !important; transition: none !important; } .reveal, .pj .k, .art-slide, .art-stack { opacity: 1 !important; transform: none !important; } .ln, .tile, .art-pin { opacity: 1 !important; translate: none !important; } .ln .pop { scale: 1 !important; opacity: 1 !important; } .draw, .sk-e, .ch-line, .bs-flow, .road-path { stroke-dashoffset: 0 !important; } .bar, .ch-bar { transform: none !important; } .grow { width: var(--w) !important; } .ch-v, .cy-node { opacity: 1 !important; } .art-grow { transform: none !important; } } /* 「動きを止める」ボタン（.rm）も同じ扱い */ .rm *, .rm *::before, .rm *::after { animation: none !important; transition: none !important; } .rm .reveal, .rm .pj .k, .rm .art-slide, .rm .art-stack { opacity: 1 !important; transform: none !important; } .rm .ln, .rm .tile, .rm .art-pin { opacity: 1 !important; translate: none !important; } .rm .ln .pop { scale: 1 !important; opacity: 1 !important; } .rm .draw, .rm .sk-e, .rm .ch-line, .rm .bs-flow, .rm .road-path { stroke-dashoffset: 0 !important; } .rm .bar, .rm .ch-bar { transform: none !important; } .rm .grow { width: var(--w) !important; } .rm .ch-v, .rm .cy-node { opacity: 1 !important; } .rm .art-grow { transform: none !important; } .rm .reveal { opacity: 1; transform: none; } .muted-cell { color: #5d7180; } /* ========================================================================== 1回目審査の修正で追加した部品 ========================================================================== */ /* 見出しを文節で折り返す（1〜2文字だけの行を作らない） */ .v-h1, .sec-h, .big-quote, .end-q, .divider-h, .sub-h, .pj-h, .why-item h3, .human-h, .rd-h { word-break: auto-phrase; text-wrap: balance; } .sec-lead, .pj-lead, .cap-tx { text-wrap: pretty; } /* フォーカス表示 */ a:focus-visible, button:focus-visible, summary:focus-visible, [tabindex]:focus-visible { outline: 3px solid var(--gold); outline-offset: 3px; border-radius: 8px; } /* ヘッダー右側・動きを止めるボタン */ .v-top-r { display: inline-flex; align-items: center; gap: 8px; } .v-motion { font-size: .74rem; font-weight: 700; padding: 4px 12px; border-radius: 999px; border: 1px solid rgba(255,255,255,.3); background: rgba(255,255,255,.08); color: #fff; white-space: nowrap; } .v-motion[aria-pressed="true"] { background: var(--gold); color: var(--ink); border-color: var(--gold); } /* ヒーロー：いますぐ使える一文 */ .v-hero-now { margin: -16px 0 30px; font-weight: 700; color: #fff; font-size: clamp(.95rem, 1.6vw, 1.05rem); } .v-hero-now span { display: inline-block; background: var(--sea); color: var(--ink); font-size: .78rem; font-weight: 900; padding: 2px 10px; border-radius: 999px; margin-right: 10px; vertical-align: 2px; } .v-hero-now a { color: var(--sea); margin-left: 8px; white-space: nowrap; } /* 02 案内役のなかまたち */ .friends { margin-top: 56px; text-align: center; } .friends-h { font-family: var(--f-head); font-weight: 900; font-size: 1.2rem; margin: 0 0 18px; } .friends-list { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(7, 1fr); gap: 12px; } .friends-list li { display: flex; flex-direction: column; align-items: center; font-size: .78rem; color: var(--muted); } .friends-list img { width: 100%; max-width: 120px; aspect-ratio: 1; border-radius: 50%; object-fit: cover; box-shadow: 0 8px 20px rgba(16,43,63,.15); margin-bottom: 8px; transition: transform .4s; } .friends-list li:hover img { transform: translateY(-4px) rotate(-3deg); } .friends-list b { font-family: var(--f-head); color: var(--ink); font-size: .95rem; } .friends-s { font-size: .82rem; color: var(--muted); margin: 14px 0 0; } /* 07 親子におすすめ */ .pj-art { position: relative; } .kid { display: inline-block; font-size: .72rem; font-weight: 900; padding: 2px 10px; border-radius: 999px; background: #ffe3d6; color: #8a3413; line-height: 1.7; } .kid--on { position: absolute; top: 10px; left: 10px; box-shadow: 0 4px 12px rgba(0,0,0,.25); } /* 05 出典の折りたたみ */ .src-box { margin-top: 18px; font-size: .82rem; color: #b5cddb; } .src-box summary { cursor: pointer; font-weight: 700; } .src-box p { margin: 8px 0 0; line-height: 1.7; } /* 09 次の一歩：準備中の案内 */ .soon { max-width: 640px; margin: 0 auto; text-align: center; background: rgba(255,255,255,.05); border: 1px dashed rgba(255,255,255,.25); border-radius: var(--radius); padding: 18px 22px; } .soon-h { margin: 0 0 6px; font-family: var(--f-head); font-weight: 900; } .soon p:last-child { margin: 0; font-size: .9rem; color: var(--txt-d); } .cta a { font-size: 1.02rem; } /* 関係者向けの区切り */ .divider { background: repeating-linear-gradient(135deg, #0b2a44 0 14px, #0a2640 14px 28px); color: #fff; padding: 56px 0; text-align: center; border-top: 4px solid var(--gold); } .divider-k { font-family: var(--f-num); letter-spacing: .22em; font-size: .78rem; color: var(--gold); margin: 0 0 8px; font-weight: 600; } .divider-h { font-family: var(--f-head); font-weight: 900; font-size: clamp(1.4rem, 3.4vw, 2.1rem); margin: 0 0 10px; } .divider p:last-child { margin: 0 auto; max-width: 40em; color: var(--txt-d); } /* 10 無料のまま／見積もり注記 */ .free-note { margin: 22px 0 0; background: #e8f7f0; border: 1px solid #b9e6d2; border-radius: 14px; padding: 14px 18px; font-size: .95rem; } .free-note b { display: block; font-family: var(--f-head); color: #17694a; margin-bottom: 2px; } .basis-note { margin: 14px 0 0; font-size: .86rem; color: #7a5100; background: #fff6e0; border-radius: 10px; padding: 10px 14px; } /* 11 助成：期間の印 */ .per { display: inline-block; font-size: .72rem; padding: 1px 8px; border-radius: 6px; margin-right: 4px; white-space: nowrap; } .per--after { background: #e4ebf5; color: #37506b; } .per--in { background: #d7f5e8; color: #17694a; } .grant-table td:nth-child(2) { min-width: 14em; } /* スマホ */ @media (max-width: 640px) { .stage-note { display: none; } .v-badge { display: none; } .v-hero-now { margin-top: -12px; } .friends-list { grid-template-columns: repeat(4, 1fr); row-gap: 16px; } /* ステージ：補足の小さい文字は消し、残す文字は実寸12px以上に */ .stage .t-xs, .stage .t-xxs, .stage .m-hide { display: none; } .stage .t-sm { font-size: 36px; } .stage .t-md { font-size: 42px; } /* 表は行ごとのカードに */ .tbl { background: transparent; box-shadow: none; overflow: visible; } .tbl table, .tbl tbody, .tbl tr, .tbl td { display: block; width: 100%; } .tbl thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); } .tbl tr { background: #fff; border-radius: 14px; box-shadow: 0 6px 18px rgba(16,43,63,.07); margin-bottom: 12px; padding: 10px 14px; } .tbl td { border: 0; padding: 4px 0; } .tbl td::before { content: attr(data-label); display: block; font-size: .72rem; font-weight: 800; color: var(--muted); } .tbl td:first-child::before { display: none; } .tbl td:first-child { font-size: .98rem; padding-bottom: 6px; border-bottom: 1px dashed rgba(16,43,63,.12); margin-bottom: 4px; } .grant-table td:nth-child(2) { min-width: 0; } .kid--on { font-size: .7rem; } } .grant-table td b.per { font-size: .72rem; font-family: var(--f-body); } /* ---- 2回目審査の修正 ---- */ .stage .m-only { display: none; } .nw { white-space: nowrap; } .friends-list b { white-space: nowrap; } .proof { align-items: start; } .more { margin-top: 28px; } .more > summary { cursor: pointer; font-weight: 800; font-family: var(--f-head); padding: 10px 0; } .more .tbl { margin-top: 8px; } @media (max-width: 640px) { .stage .keep { display: inline; font-size: 34px; } .stage .m-only { display: inline; } .friends-list b { font-size: .82rem; } } /* ---- 3Dの地球（three.js）。背景のSVG → canvas → 場面のSVG の順に重ねる ---- */ .stage-view { position: relative; } .stage-bg { position: absolute; inset: 0; width: 100%; height: 100%; display: block; } .earth3d { position: absolute; inset: 0; width: 100%; height: 100%; display: block; pointer-events: none; opacity: 0; transition: opacity .3s; } .stage-view .stage { position: relative; z-index: 2; background: transparent; } .stage.has3d .globe-fb { display: none; } .stage.has3d ~ .globe-hit { display: block; } .has3d-on .earth3d { opacity: 1; } .globe-hit { display: none; position: absolute; z-index: 3; border-radius: 50%; touch-action: none; cursor: grab; } .globe-hit.is-off { pointer-events: none; } .globe-hit:active { cursor: grabbing; } .leads .lead { opacity: 0; transition: opacity .35s; } .leads .lead.on { opacity: 1; } .stage:not(.has3d) .leads { display: none; } .rm .earth3d { display: none; } /* 動きを止めた／動きを減らす設定のときも、場面1と最後の軌道の点々は表示（後ろ半分は地球の絵の下） */ .rm .stage[data-scene="v-earth"] .orbit-dots circle, .rm .stage[data-scene="you"] .orbit-dots circle { opacity: 1 !important; } @media (prefers-reduced-motion: reduce) { .stage[data-scene="v-earth"] .orbit-dots circle, .stage[data-scene="you"] .orbit-dots circle { opacity: 1 !important; } } /* 流れ星 */ .shoot { opacity: 0; transform: translate(var(--x), var(--y)); animation: shoot 18s var(--d) linear infinite; } @keyframes shoot { 0% { opacity: 0; transform: translate(var(--x), var(--y)); } 1% { opacity: 1; } 5% { opacity: 0; transform: translate(calc(var(--x) + 90px), calc(var(--y) + 30px)); } 100% { opacity: 0; transform: translate(calc(var(--x) + 90px), calc(var(--y) + 30px)); } } /* 引き出し線の先の光るリング・いま話しているラベル */ .leads .lead circle { fill: none; stroke-width: 3; transform-box: fill-box; transform-origin: center; animation: ringPulse 1.6s ease-out infinite; } @keyframes ringPulse { 0% { r: 5; opacity: 1; } 100% { r: 16; opacity: 0; } } .lbl { transition: filter .3s; } .lbl.hot { filter: drop-shadow(0 0 12px rgba(255,255,255,.75)); } .lbl.hot circle:nth-child(2) { opacity: .5; } /* タップした生きものの吹き出し */ .earth-bubble { position: absolute; z-index: 5; transform: translate(-50%, calc(-100% - 14px)) scale(.6); opacity: 0; pointer-events: none; background: #fff; color: var(--ink); border-radius: 14px; padding: 8px 14px; font-size: .9rem; box-shadow: 0 8px 24px rgba(0,0,0,.35); transition: opacity .25s, transform .25s cubic-bezier(.2,1.4,.4,1); text-align: center; white-space: nowrap; } .earth-bubble::after { content: ""; position: absolute; left: 50%; bottom: -7px; margin-left: -7px; border: 7px solid transparent; border-bottom: 0; border-top-color: #fff; } .earth-bubble.show { opacity: 1; transform: translate(-50%, calc(-100% - 14px)) scale(1); pointer-events: auto; } .earth-bubble b { display: block; font-family: var(--f-head); } .earth-bubble a { display: block; font-size: .78rem; color: var(--blue); font-weight: 700; } .rm .shoot, .rm .leads .lead circle { animation: none; } /* ---- 3D地球：4回目の修正 ---- */ .globe-hit { touch-action: pan-y; } .earth-hint { position: absolute; z-index: 3; margin: 0; transform: translate(-50%, 0); font-size: .78rem; font-weight: 700; color: #cfe3ef; background: rgba(7,26,45,.75); border: 1px solid rgba(255,255,255,.18); border-radius: 999px; padding: 3px 12px; white-space: nowrap; opacity: 0; transition: opacity .4s; pointer-events: none; } .earth-hint.on { opacity: 1; } .stage:not(.has3d) ~ .earth-hint { display: none; } .earth-bubble { padding: 10px 34px 12px 16px; white-space: normal; min-width: 150px; } .earth-bubble .eb-btn { display: flex; align-items: center; justify-content: center; min-height: 44px; margin-top: 8px; padding: 0 14px; border-radius: 999px; background: var(--blue); color: #fff; font-size: .82rem; text-decoration: none; } .earth-bubble .eb-x { position: absolute; top: 2px; right: 2px; width: 32px; height: 32px; border: 0; background: transparent; font-size: 1.1rem; color: var(--muted); cursor: pointer; } @media (max-width: 640px) { .earth-hint { font-size: .7rem; } } .globe-hit.is-grabbing { cursor: grabbing; } /* ---- 3D地球：6回目の修正 ---- */ .earth-hint.is-corner { transform: none; font-size: .66rem; padding: 2px 9px; } .earth-bubble .eb-x { width: 44px; height: 44px; top: 0; right: 0; } .earth-bubble { padding-right: 44px; } .earth-bubble.is-below { transform: translate(-50%, 18px) scale(.6); } .earth-bubble.is-below.show { transform: translate(-50%, 18px) scale(1); } .earth-bubble.is-below::after { bottom: auto; top: -7px; border-top: 0; border-bottom: 7px solid #fff; } .earth-bubble { min-width: 180px; } .earth-bubble .eb-btn { white-space: nowrap; } .earth-hint.is-corner { color: #fff; background: rgba(11,114,185,.85); border-color: rgba(255,255,255,.45); } /* ---------- 最初から音声つきで再生：ミュートボタンと「タップで開始」の案内 ---------- */ .c-mute .i-mut { display: none; } .c-mute.is-muted .i-snd { display: none; } .c-mute.is-muted .i-mut { display: block; } .c-mute.is-muted { background: rgba(255,255,255,.16); border-color: rgba(255,255,255,.4); } .auto-hint { position: absolute; left: 50%; bottom: 18px; z-index: 6; transform: translate(-50%, 8px); opacity: 0; pointer-events: none; display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 10px 20px; border: 0; border-radius: 999px; background: var(--gold); color: var(--ink); font-weight: 900; font-size: .95rem; box-shadow: 0 10px 30px rgba(0,0,0,.35); transition: opacity .35s, transform .35s; white-space: nowrap; cursor: pointer; } .auto-hint.show { opacity: 1; transform: translate(-50%, 0); pointer-events: auto; animation: autoHintPulse 2.4s ease-in-out .6s infinite; } @keyframes autoHintPulse { 0%, 100% { box-shadow: 0 10px 30px rgba(0,0,0,.35), 0 0 0 0 rgba(242,177,52,.5); } 50% { box-shadow: 0 10px 30px rgba(0,0,0,.35), 0 0 0 10px rgba(242,177,52,0); } } .rm .auto-hint.show { animation: none; } @media (max-width: 640px) { .auto-hint { font-size: .85rem; padding: 8px 16px; bottom: 12px; } } /* ========================================================================== 編（コンセプト編／全体編 × ショート／詳細） ========================================================================== */ /* コンセプト編の場面ごとの地球の位置 */ .stage[data-scene="c-catch"] .globe-pos { transform: translate(500px, 440px) scale(.78); } .stage[data-scene="c-hai"] .globe-pos, .stage[data-scene="c-ratio"] .globe-pos, .stage[data-scene="c-steps"] .globe-pos, .stage[data-scene="c-100"] .globe-pos { transform: translate(500px, 1000px) scale(.6); opacity: 0; } .stage[data-scene="c-project"] .globe-pos, .stage[data-scene="c-you"] .globe-pos { transform: translate(500px, 1000px) scale(.6); opacity: 0; } .stage[data-scene="c-next"] .globe-pos { transform: translate(860px, 420px) scale(.5); } .stage[data-scene="c-end"] .globe-pos { transform: translate(500px, 320px) scale(.95); } .stage[data-scene="c-hai"] .orbit, .stage[data-scene="c-hai"] .orbit-dots, .stage[data-scene="c-ratio"] .orbit, .stage[data-scene="c-ratio"] .orbit-dots, .stage[data-scene="c-steps"] .orbit, .stage[data-scene="c-steps"] .orbit-dots, .stage[data-scene="c-project"] .orbit, .stage[data-scene="c-project"] .orbit-dots, .stage[data-scene="c-next"] .orbit, .stage[data-scene="c-next"] .orbit-dots, .stage[data-scene="c-100"] .orbit, .stage[data-scene="c-100"] .orbit-dots, .stage[data-scene="c-you"] .orbit, .stage[data-scene="c-you"] .orbit-dots { opacity: 0; } .rm .stage[data-scene="c-catch"] .orbit-dots circle, .rm .stage[data-scene="c-end"] .orbit-dots circle { opacity: 1 !important; } /* コンセプト編の動き */ .catch-big { font-size: 96px; } .wave-a { animation: waveX 6s ease-in-out infinite alternate; } .wave-b { animation: waveX 8s ease-in-out infinite alternate-reverse; } @keyframes waveX { to { transform: translateX(-30px); } } .picker { transform-box: fill-box; } .show .picker { animation: pickBob 1.8s var(--d) ease-in-out infinite; } @keyframes pickBob { 50% { translate: 0 -6px; } } .trash { transition: opacity .6s calc(var(--d) + .6s), translate .6s calc(var(--d) + .6s), scale .6s calc(var(--d) + .6s); transform-box: fill-box; transform-origin: center; } .sc.on .show .trash { opacity: 0; translate: 0 -30px; scale: .4; } .ratio-big { transform-box: fill-box; transform-origin: 100% 100%; scale: .003; transition: scale 3.2s .4s cubic-bezier(.6,0,.2,1); } .show .ratio-big { scale: 1; } .ratio-ping { transform-box: fill-box; transform-origin: center; animation: ringPulse2 1.4s ease-out infinite; } @keyframes ringPulse2 { from { scale: .3; opacity: 1; } to { scale: 2.6; opacity: 0; } } .foot-big { transform-box: fill-box; transform-origin: center; } .show .foot-big { animation: bigFoot 2.4s both; } @keyframes bigFoot { 0% { opacity: 0; } 15%, 62% { opacity: 1; } 100% { opacity: .16; } } .feet-label { opacity: 0; } .show .feet-label { animation: footIn .6s 2.6s both; } .feet use { opacity: 0; transform-box: fill-box; transform-origin: center; } .show .feet use { animation: footIn .5s var(--d) both; } @keyframes footIn { from { opacity: 0; scale: .2; } to { opacity: .95; scale: 1; } } .spot { animation: spotSwing 3s ease-in-out infinite alternate; transform-box: view-box; } @keyframes spotSwing { from { opacity: .1; } to { opacity: .3; } } .gather { opacity: 0; } .show .gather { animation: footIn .5s var(--d) both; } .heart-up { opacity: 0; } .show .heart-up { animation: heartUp 2.2s var(--d) ease-out infinite; transform-box: fill-box; } @keyframes heartUp { 0% { opacity: 0; translate: 0 10px; } 25% { opacity: 1; } 100% { opacity: 0; translate: 0 -50px; } } .day { fill: rgba(120,217,179,.06); stroke: #3d7aa3; stroke-width: 2; } .day-1 { fill: #f2b134; stroke: #f2b134; } .show .day-1 { animation: dayGlow 1.6s ease-in-out infinite; } @keyframes dayGlow { 50% { fill: #ffd27a; filter: drop-shadow(0 0 10px #f2b134); } } .spin-slow { transform-box: fill-box; transform-origin: center; animation: spin2 9s linear infinite; } @keyframes spin2 { to { rotate: 360deg; } } .src-note { font-size: 19px; } /* 編の切り替えタブ */ .ed-tabs { display: flex; flex-wrap: wrap; align-items: stretch; justify-content: space-between; gap: 10px 14px; margin: 0 0 14px; } .ed-row { display: flex; gap: 8px; flex: 1 1 420px; } .ed-tab { flex: 1; text-align: left; border: 2px solid rgba(255,255,255,.16); background: rgba(255,255,255,.04); color: #fff; border-radius: 16px; padding: 10px 16px; transition: all .2s; } .ed-tab b { display: block; font-family: var(--f-head); font-size: 1.08rem; } .ed-tab small { display: block; font-size: .76rem; color: #9fc3d8; } .ed-tab:hover { border-color: rgba(255,255,255,.4); } .ed-tab[aria-selected="true"] { border-color: var(--gold); background: rgba(242,177,52,.14); box-shadow: 0 0 0 3px rgba(242,177,52,.18); } .ed-tab[aria-selected="true"] small { color: #ffe3a3; } .ed-len { display: flex; gap: 6px; align-items: center; background: rgba(255,255,255,.06); border-radius: 999px; padding: 5px; } .ed-pill { border: 0; background: transparent; color: #cfe3ef; border-radius: 999px; padding: 9px 16px; font-weight: 800; font-size: .88rem; white-space: nowrap; min-height: 40px; } .ed-pill[aria-selected="true"] { background: var(--sea); color: var(--ink); } .ed-dur { font-family: var(--f-num); font-weight: 600; opacity: .75; font-size: .8em; } .script-ed { margin: 10px 0; } .script-ed > summary { cursor: pointer; font-weight: 700; color: var(--sea); } @media (max-width: 640px) { .ed-row { flex-basis: 100%; } .ed-tab { padding: 8px 12px; } .ed-tab b { font-size: .98rem; } .ed-len { flex: 1 1 100%; justify-content: stretch; } .ed-pill { flex: 1; padding: 8px 6px; font-size: .82rem; } .catch-big { font-size: 104px; } } @media (max-width: 640px) { .stage .t-lg.keep { font-size: 54px; } .stage .t-md.keep { font-size: 46px; } .stage .catch-big { font-size: 108px; } } /* なぜやるのか：10トンと1,100万トン */ .scale-case { display: grid; grid-template-columns: 1fr auto 1fr; gap: 14px 20px; align-items: center; margin: 48px 0 0; background: #fff; border-radius: var(--radius); padding: 24px; box-shadow: 0 10px 30px rgba(16,43,63,.07); } .sc-item { text-align: center; } .sc-k { margin: 0; font-size: .86rem; color: var(--muted); font-weight: 700; line-height: 1.5; } .sc-v { margin: 6px 0 0; font-family: var(--f-head); font-weight: 900; font-size: 1.2rem; } .sc-v b { font-family: var(--f-num); font-size: 2.6rem; color: var(--blue); } .sc-item:last-of-type .sc-v b { color: var(--coral); } .sc-vs { font-family: var(--f-num); font-weight: 800; color: var(--muted); } .sc-note { grid-column: 1 / -1; margin: 6px 0 0; text-align: center; font-weight: 700; } .sc-note small { display: block; font-weight: 500; color: var(--muted); font-size: .78rem; margin-top: 4px; } @media (max-width: 640px) { .scale-case { grid-template-columns: 1fr; } .sc-v b { font-size: 2.1rem; } } /* ---- 4つの編・1回目修正 ---- */ .keep-s { font-size: 20px; font-weight: 700; } .dot-glow { animation: ringPulse2 1.6s ease-in-out infinite alternate; transform-box: fill-box; transform-origin: center; } .you-link rect { transition: stroke .2s, fill .2s; } .you-link:hover rect, .you-link:focus rect { stroke: #78d9b3; fill: #12395b; } .sc-s { margin: 2px 0 0; font-size: .74rem; color: var(--muted); } /* 流れ星は見出しの無い右側の帯だけ、地球が主役の場面だけ */ .shoots { display: none; } .stage-view[data-sc="v-earth"] .shoots, .stage-view[data-sc="c-catch"] .shoots, .stage-view[data-sc="c-end"] .shoots, .stage-view[data-sc="you"] .shoots { display: inline; } /* 再生ボタン：再生中は音量の波が揺れる */ .c-play .eq { display: none; align-items: flex-end; gap: 3px; height: 18px; } .is-playing .c-play .eq { display: inline-flex; } .is-playing .c-play .i-pause { display: none; } .c-play .eq i { width: 4px; height: 6px; background: var(--ink); border-radius: 2px; } .is-playing:not(.is-muted) .c-play .eq i { animation: eq .9s ease-in-out infinite; } .is-playing .c-play .eq i:nth-child(2) { animation-delay: -.3s; } .is-playing .c-play .eq i:nth-child(3) { animation-delay: -.6s; } .is-playing .c-play .eq i:nth-child(4) { animation-delay: -.15s; } @keyframes eq { 0%, 100% { height: 5px; } 50% { height: 18px; } } .ed-tab small, .ed-tab b { white-space: nowrap; word-break: keep-all; } @media (max-width: 640px) { .stage .keep-s { font-size: 23px; } .stage .src-note { font-size: 21px; } .ai-card { height: 300px; } .ed-tab small { font-size: .72rem; } } @media (max-width: 640px) { .stage .ai-item { font-size: 26px; } } @media (max-width: 640px) { .stage .inset-t { font-size: 25px; } } @media (max-width: 640px) { .stage .m28 { font-size: 28px; } } /* 4つの編・最終修正 */ .foot-big-label { opacity: 0; } .show .foot-big-label { animation: bigFootLabel 2.4s both; } @keyframes bigFootLabel { 0% { opacity: 0; } 15%, 62% { opacity: 1; } 100% { opacity: .6; } } .grant-s { font-size: 20px; } @media (max-width: 640px) { .stage .grant-s { font-size: 34px; } .stage .you-t { font-size: 25px; } } /* ========================================================================== 9. スライドの型（1シーン＝1枚。parts/slides.php） ・型は4つ：フル画像型 sl--photo／左右比較型 sl--split／データ型 sl--data／地球型 sl--earth ・文字の位置・大きさ・余白は、下の .slides の変数だけで決める（全場面共通） ・PCはステージの幅に対する割合（cqw）で、スライドのように拡大縮小する。スマホは縦長・px指定 ========================================================================== */ .stage-view { container-type: inline-size; } /* 場面の切り替えはクロスフェード0.6秒 */ .sc { transition: opacity .6s, visibility 0s .6s; } .sc.on { transition: opacity .6s, visibility 0s; } /* 3Dの地球は、ステージ上部の 1000×680 の範囲に描く（スマホでステージが縦長になっても伸びない） */ .earth3d { bottom: auto; height: auto; aspect-ratio: 1000 / 680; } .slides { position: absolute; inset: 0; z-index: 2; pointer-events: none; font-family: var(--f-head); color: #fff; line-height: 1.3; --px: 5.6cqw; /* 左右の安全域 */ --py: 5.2cqw; /* 上の安全域 */ --col: 44cqw; /* 見出しの列の幅 */ --fs-k: max(14px, 1.5cqw); /* 見出しの上の小さなラベル */ --fs-h: 4.2cqw; /* 見出し */ --fs-hx: 4.9cqw; /* キャッチ（最初と最後） */ --fs-n: 8.4cqw; /* 決め手の数字 */ --fs-s: max(15px, 1.9cqw); /* 補足（1〜2行） */ --fs-l: max(14px, 1.65cqw); /* ラベル */ --fs-src: max(14px, 1.12cqw); /* 出典 */ --hl: #ffaa3b; /* キーワードの強調（オレンジ） */ --navy: #061a2c; } .sl { position: absolute; inset: 0; overflow: hidden; } .sl p { margin: 0; } .sl em { font-style: normal; color: var(--hl); } .sl--m-only { display: none; } .sl a { pointer-events: auto; } /* 画像：全面に敷き、8秒で1.00→1.06倍にゆっくり寄る（消えるときは見えなくなってから元に戻す） */ .sl-media { position: absolute; inset: 0; overflow: hidden; } .sl-img { position: absolute; inset: 0; width: 100%; height: 100%; max-width: none; object-fit: cover; object-position: var(--pos, 50% 50%); transform-origin: var(--pos, 50% 50%); transform: scale(1); transition: transform 0s .6s; } .sc.on .sl-img { transform: scale(1.06); transition: transform 8s cubic-bezier(.3,.1,.3,1); } .rm .sl-img, .rm .sc.on .sl-img { transform: none; transition: none; } /* 文字の列（左上） */ .sl-txt { position: absolute; left: var(--px); top: var(--py); width: var(--col); display: flex; flex-direction: column; align-items: flex-start; } .sl--wide .sl-txt { width: auto; right: var(--px); } .sl-k { font-size: var(--fs-k); font-weight: 700; color: var(--sea); letter-spacing: .08em; margin-bottom: .8em !important; } .sl-h { font-size: var(--fs-h); font-weight: 900; line-height: 1.28; letter-spacing: .01em; } .sl-h--xl { font-size: var(--fs-hx); } .sl-h .ln { display: inline-block; } .sl-num { margin-top: .5em !important; font-size: calc(var(--fs-h) * .78); font-weight: 900; line-height: 1; white-space: nowrap; } .sl-num b { font-family: var(--f-num); font-weight: 800; font-size: var(--fs-n); color: var(--hl); margin: 0 .04em; letter-spacing: -.01em; } .sl-num small { font-size: .72em; margin-right: .2em; } .sl-note { margin-top: .9em !important; font-size: var(--fs-src); font-weight: 700; color: #b9d3e2; font-family: var(--f-body); } .sl-s { margin-top: .8em !important; font-size: var(--fs-s); font-weight: 700; line-height: 1.5; color: #e6f2f8; } .sl-chip { margin-top: 1em !important; display: inline-block; font-size: var(--fs-l); font-weight: 700; line-height: 1.4; padding: .45em 1em; border-radius: 999px; background: rgba(6,26,44,.72); border: 1.5px solid rgba(255,255,255,.3); } .sl-chip--free { border-color: var(--sea); color: #d8fff0; } .sl-src { position: absolute; right: var(--px); bottom: 2.4cqw; max-width: 62cqw; text-align: right; font-family: var(--f-body); font-size: var(--fs-src); font-weight: 500; line-height: 1.5; color: #9fbdd0; } /* ---- フル画像型：左3分の1を濃紺のグラデーションに ---- */ .sl--photo .sl-media::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(6,26,44,.94) 0%, rgba(6,26,44,.84) 24%, rgba(6,26,44,.42) 43%, rgba(6,26,44,0) 60%), linear-gradient(0deg, rgba(6,26,44,.5) 0%, rgba(6,26,44,0) 26%); } .sl--photo .sl-txt { text-shadow: 0 2px 22px rgba(0,0,0,.45); } /* 下の細い帯（光を当てる → 知る → … → 仲間） */ .sl-band { position: absolute; left: 0; right: 0; bottom: 0; margin: 0; list-style: none; display: flex; flex-wrap: wrap; align-items: center; gap: .5em 0; padding: 5cqw var(--px) 2.6cqw; background: linear-gradient(0deg, rgba(6,26,44,.94) 30%, rgba(6,26,44,0)); font-size: var(--fs-l); font-weight: 700; } .sl-band li { display: flex; align-items: center; white-space: nowrap; } .sl-band li + li::before { content: "→"; margin: 0 .8em; color: rgba(255,255,255,.55); } .stp { opacity: .3; transition: opacity .6s var(--d, 0s), color .6s var(--d, 0s); } .stp.show { opacity: 1; } .stp--goal.show { color: var(--hl); } /* ---- 左右比較型 ---- */ .sl--split { background: var(--navy); } .split-p { position: absolute; top: 0; bottom: 0; width: calc(50% - .3cqw); margin: 0; overflow: hidden; } .split-l { left: 0; } .split-r { right: 0; } .split-p figcaption { position: absolute; left: 0; right: 0; bottom: 0; padding: 12cqw 3.4cqw 3.6cqw; background: linear-gradient(0deg, rgba(6,26,44,.94) 20%, rgba(6,26,44,0)); font-size: calc(var(--fs-h) * .8); font-weight: 900; line-height: 1.25; } .split-l figcaption b { color: #cfe3ef; } .split-r figcaption b { color: var(--hl); } .split-arrow { position: absolute; left: 50%; top: 46%; z-index: 2; width: 8cqw; height: 8cqw; margin: -4cqw 0 0 -4cqw; border-radius: 50%; background: var(--hl); color: var(--navy); display: grid; place-items: center; font-family: var(--f-num); font-size: 4.2cqw; font-weight: 800; line-height: 1; box-shadow: 0 0 0 .7cqw rgba(6,26,44,.65), 0 10px 30px rgba(0,0,0,.4); } .split-k { position: absolute; left: 3.4cqw; top: var(--py); text-shadow: 0 2px 14px rgba(0,0,0,.6); } .split-l .sl-img { transition: transform 0s .6s, filter 1s; } .sc.on .split-l .sl-img { transition: transform 8s cubic-bezier(.3,.1,.3,1), filter 1.2s 1.8s; } .sl--split:has(.split-r.show) .split-l .sl-img { filter: saturate(.45) brightness(.62); } /* はじまりの一枚：右はいまのサービス画面4枚 */ .split-shots { background: radial-gradient(90% 80% at 50% 30%, #12395b, var(--navy)); } .split-shots .shots { position: absolute; left: 3.4cqw; right: 3.4cqw; top: 9cqw; display: grid; grid-template-columns: 1fr 1fr; gap: 1.4cqw; } .split-shots .shots img { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; object-position: top; border-radius: .8cqw; box-shadow: 0 10px 30px rgba(0,0,0,.4); } .sl--sketch .split-l { background: #f3eee4; } /* ---- データ型：濃紺の背景に、主役を1つ ---- */ .sl--data { background: radial-gradient(90% 80% at 85% 0%, rgba(24,174,202,.16), transparent 60%), linear-gradient(180deg, rgba(6,26,44,.9), rgba(4,15,29,.95)); } .sl-hero { position: absolute; } .sl-media--dim .sl-img { opacity: .42; } .sl-media--dim::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(6,26,44,.95) 0%, rgba(6,26,44,.7) 45%, rgba(6,26,44,.45) 100%); } .sl--ratio { background: var(--navy); } /* c-ratio：巨大な面（1,100万トン）と、その中で光る1点（10トン） */ .ratio-hero { left: 52cqw; right: var(--px); top: var(--py); bottom: 8.4cqw; } .ratio-field { position: absolute; inset: 0; border: 1.5px solid rgba(159,195,216,.55); border-radius: .5cqw; background-color: rgba(24,80,120,.28); background-image: radial-gradient(circle, rgba(170,205,225,.5) 0 1px, transparent 1.6px); background-size: 9px 9px; transform-origin: 0 100%; } .sl .ratio-field { scale: .02; transition: opacity .5s, translate .5s, scale 2.6s .4s cubic-bezier(.6,0,.2,1); } .sl .ratio-field.show { scale: 1; } .ratio-dot { position: absolute; left: 1.2cqw; bottom: 1.2cqw; width: 6px; height: 6px; margin: -3px 0 0 -3px; border-radius: 50%; background: #fff; box-shadow: 0 0 6px 2px var(--hl), 0 0 18px 6px rgba(255,170,59,.55); } .ratio-dot::after { content: ""; position: absolute; left: 50%; top: 50%; width: 30px; height: 30px; margin: -15px 0 0 -15px; border-radius: 50%; border: 2px solid var(--hl); animation: ringPulse2 1.6s ease-out infinite; } .ratio-call { position: absolute; right: calc(100% + 3cqw); bottom: 0; width: 40cqw; padding: 1.4cqw 1.8cqw; border-radius: 1.2cqw; background: rgba(6,26,44,.86); border: 1.5px solid rgba(255,170,59,.6); font-size: var(--fs-s); font-weight: 700; line-height: 1.5; } .ratio-call b { color: var(--hl); font-size: 1.15em; } .ratio-call p + p { margin-top: .3em; color: #e6f2f8; } .ratio-call::after { content: ""; position: absolute; left: 100%; bottom: calc(1.2cqw + 2px); width: calc(3cqw + 1.2cqw - 4px); border-top: 2px dashed var(--hl); } .ratio-gosa { color: #ffc98a; } /* c-100：100マス（1日目が光る）＋キャラクター */ .days-hero { right: var(--px); top: 11cqw; width: 44cqw; } .days { display: grid; grid-template-columns: repeat(10, 1fr); gap: .7cqw; } .days i { aspect-ratio: 1; border-radius: .45cqw; border: 1.5px solid rgba(61,122,163,.95); background: rgba(120,217,179,.05); opacity: 0; } .days.show i { animation: dayIn .4s var(--d) both; } @keyframes dayIn { from { opacity: 0; scale: .4; } to { opacity: 1; scale: 1; } } .days i.day1 { background: var(--hl); border-color: var(--hl); } .days.show i.day1 { animation: dayIn .4s var(--d) both, dayGlow2 1.6s 1s ease-in-out infinite; } @keyframes dayGlow2 { 50% { box-shadow: 0 0 0 .5cqw rgba(255,170,59,.25), 0 0 2cqw rgba(255,170,59,.8); } } .days-1 { position: absolute; left: 0; bottom: calc(100% + .6cqw); font-size: var(--fs-src); color: var(--hl); font-weight: 700; } .sl-chars { position: absolute; left: var(--px); bottom: 6cqw; display: flex; } .sl-chars img { width: 6.4cqw; height: 6.4cqw; border-radius: 50%; object-fit: cover; border: .3cqw solid #fff; margin-right: -1.1cqw; box-shadow: 0 6px 18px rgba(0,0,0,.35); } .sl-chars.show img { animation: popIn .6s var(--d, 0s) cubic-bezier(.2,1.4,.4,1) both; } /* c-you：4枚の大きなカード（それぞれのサービスへ） */ .you-cards { left: var(--px); right: var(--px); top: 21cqw; bottom: 5cqw; display: grid; grid-template-columns: repeat(4, 1fr); gap: 1.8cqw; align-content: center; } .you-card { display: flex; flex-direction: column; overflow: hidden; border-radius: 1.4cqw; background: rgba(14,45,73,.95); border: 1.5px solid rgba(255,255,255,.14); color: #fff; text-decoration: none; transition: border-color .2s, transform .2s; box-shadow: 0 14px 34px rgba(0,0,0,.35); } .you-card:hover, .you-card:focus-visible { border-color: var(--sea); transform: translateY(-3px); } .you-card img { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; object-position: top; } .you-card b { padding: 1.2cqw 1.4cqw 0; font-size: calc(var(--fs-h) * .56); font-weight: 900; } .you-card small { padding: .3cqw 1.4cqw 1.4cqw; font-size: var(--fs-l); font-weight: 700; color: #9fc3d8; } /* why：つまずく場所が3つ */ .why-cards { left: var(--px); right: var(--px); top: 20cqw; display: grid; grid-template-columns: repeat(3, 1fr); gap: 2cqw; } .why-card { padding: 2.2cqw 2.4cqw; border-radius: 1.6cqw; background: rgba(14,45,73,.92); border: 1.5px solid rgba(255,255,255,.12); } .why-card b { display: block; font-family: var(--f-num); font-weight: 800; font-size: 4.6cqw; line-height: 1; color: var(--hl); } .why-card p { margin-top: .5em !important; font-size: calc(var(--fs-h) * .8); font-weight: 900; } .why-card small { display: block; margin-top: .6em; font-size: var(--fs-l); font-weight: 700; color: #b9d3e2; line-height: 1.5; } .sl .why-card { transition: opacity .7s var(--d, 0s), translate .7s var(--d, 0s) cubic-bezier(.2,.8,.2,1); } .sl--why:has(.why-catch.show) .why-card.show { opacity: .4; } .why-catch { position: absolute; left: var(--px); right: var(--px); bottom: 4.6cqw; text-align: center; font-size: var(--fs-h); font-weight: 900; padding: 1.4cqw; border-radius: 999px; background: rgba(255,170,59,.12); border: 1.5px solid rgba(255,170,59,.4); } /* proof：月別グラフ（4月と9月を強調） */ .chart2 { left: var(--px); right: var(--px); top: 18cqw; bottom: 8.6cqw; transition: bottom .6s; } .sl--proof:has(.sl-stats .show) .chart2 { bottom: 17cqw; } .bars { position: absolute; inset: 0 0 3.2cqw; display: flex; align-items: flex-end; gap: 1cqw; } .bar-c { position: relative; flex: 1; height: 100%; display: flex; align-items: flex-end; } .bar-c i { display: block; width: 100%; height: var(--h); border-radius: .5cqw .5cqw 0 0; background: linear-gradient(180deg, #78d9b3, #18aeca); opacity: .45; transform: scaleY(0); transform-origin: bottom; transition: transform 1.1s var(--d) cubic-bezier(.2,.8,.2,1); } .bars.show .bar-c i { transform: scaleY(1); } .bar-c.hot i { opacity: 1; background: linear-gradient(180deg, #ffc46b, var(--hl)); } .bar-c em { position: absolute; left: 50%; bottom: calc(var(--h) + .5cqw); transform: translateX(-50%); font-family: var(--f-num); font-weight: 800; font-size: var(--fs-l); color: #fff; white-space: nowrap; opacity: 0; transition: opacity .5s calc(var(--d) + .9s); } .bar-c:last-child em { left: auto; right: 0; transform: none; } .bars.show .bar-c em { opacity: 1; } .bar-c small { position: absolute; left: 50%; top: calc(100% + .6cqw); transform: translateX(-50%); font-size: var(--fs-src); font-weight: 700; color: #9fbdd0; white-space: nowrap; text-align: center; line-height: 1.2; } .bar-c small span { display: block; font-size: .85em; opacity: .75; } .bar-c.hot small { color: #fff; } .chart-call { position: absolute; right: calc(100% / 12 + 2cqw); top: 0; text-align: right; } .chart-call b { display: block; font-family: var(--f-num); font-weight: 800; font-size: 6.2cqw; line-height: 1; color: var(--hl); } .chart-call b small { font-family: var(--f-head); font-size: .45em; margin-left: .1em; } .chart-call span { display: block; margin-top: .4em; font-size: var(--fs-l); font-weight: 700; color: #e6f2f8; } .chart-call2 { position: absolute; right: calc(100% / 12 + 2cqw); top: 10.6cqw; font-size: var(--fs-l); font-weight: 700; color: #b9d3e2; } .sl-stats { position: absolute; left: var(--px); right: var(--px); bottom: 7.4cqw; margin: 0; padding: 0; list-style: none; display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.6cqw; } .sl-stats li { display: flex; align-items: baseline; justify-content: space-between; gap: 1em; padding: 1cqw 1.6cqw; border-radius: 1.2cqw; background: rgba(14,45,73,.92); border: 1.5px solid rgba(255,255,255,.1); } .sl-stats span { font-size: var(--fs-l); font-weight: 700; color: #9fc3d8; white-space: nowrap; } .sl-stats b { font-family: var(--f-num); font-weight: 800; font-size: 2.6cqw; white-space: nowrap; } .sl-stats b small { font-family: var(--f-head); font-size: .55em; margin-left: .15em; } /* projects：15の取り組み */ .tiles { left: var(--px); right: var(--px); top: 18cqw; bottom: 3cqw; margin: 0; padding: 0; list-style: none; display: grid; grid-template-columns: repeat(5, 1fr); grid-template-rows: repeat(3, 1fr); gap: .8cqw 1.6cqw; } .tile2 { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .3cqw; text-align: center; } .tile2 svg { width: 4cqw; height: 4cqw; padding: 1.2cqw; box-sizing: content-box; border-radius: 50%; background: rgba(14,45,73,.95); border: 1.5px solid rgba(120,217,179,.45); fill: none; stroke: var(--sea); stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; } .tile2 b { font-size: var(--fs-l); font-weight: 900; line-height: 1.25; } .tile2 small { font-size: var(--fs-src); font-weight: 700; color: #9fbdd0; } .tile2 .ts-live { color: var(--sea); } .tile2 .ts-prep, .tile2 .ts-dev { color: #ffd08a; } .stp.tile2.show svg { animation: tileGlow2 1.2s var(--d) ease-out both; } @keyframes tileGlow2 { 0% { box-shadow: 0 0 0 0 rgba(120,217,179,.7); } 100% { box-shadow: 0 0 0 1.4cqw rgba(120,217,179,0); } } /* hundred：100日で無料のアースクルー1,000人 */ .calc { right: var(--px); top: var(--py); width: 40cqw; } .calc-in { margin: 0; padding: 0; list-style: none; display: grid; gap: .8cqw; } .calc-in li { display: flex; align-items: baseline; justify-content: space-between; padding: 1cqw 1.6cqw; border-radius: 1.1cqw; background: rgba(14,45,73,.92); border: 1.5px solid rgba(255,255,255,.1); } .calc-in span { font-size: var(--fs-l); font-weight: 700; color: #cfe3ef; } .calc-in b { font-family: var(--f-num); font-weight: 800; font-size: 2.4cqw; } .calc-out { margin-top: 1.2cqw !important; text-align: right; font-size: calc(var(--fs-h) * .7); font-weight: 900; } .calc-out b { font-family: var(--f-num); font-weight: 800; color: var(--hl); font-size: 1.3em; margin: 0 .05em; } .sl--hundred .sl-chars { bottom: 11cqw; } .sl-bottom { position: absolute; left: var(--px); right: var(--px); bottom: 3.6cqw; font-size: var(--fs-s); font-weight: 700; color: #e6f2f8; } .sl-bottom b { color: var(--hl); } /* road：未来へのロードマップ（時間軸） */ .road2 { left: var(--px); right: var(--px); top: 27cqw; margin: 0; padding: 0; list-style: none; display: grid; grid-template-columns: repeat(5, 1fr); gap: 1.4cqw; } .road2::before { content: ""; position: absolute; left: 0; right: 0; top: 1cqw; height: .35cqw; border-radius: 99px; background: linear-gradient(90deg, var(--cyan), var(--hl)); opacity: .8; } .road2 li { position: relative; padding-top: 3.8cqw; } .road2 li::before { content: ""; position: absolute; left: 0; top: .1cqw; width: 2.2cqw; height: 2.2cqw; box-sizing: border-box; border-radius: 50%; background: var(--navy); border: .4cqw solid var(--cyan); } .road2 b { display: block; font-family: var(--f-num); font-weight: 800; font-size: 2.5cqw; line-height: 1.1; } .road2 b small { font-family: var(--f-head); font-size: var(--fs-src); font-weight: 700; color: #9fc3d8; margin-left: .5em; } .road2 span { display: block; margin-top: .7cqw; font-size: var(--fs-l); font-weight: 700; line-height: 1.45; color: #e6f2f8; } .road2 .road-goal b { color: var(--hl); } .road2 .road-goal b small { color: var(--hl); } .road2 .road-goal span { color: #fff; font-weight: 900; } .road2 .road-goal::before { background: var(--hl); border-color: #ffd9a3; box-shadow: 0 0 0 .6cqw rgba(255,170,59,.25); } /* ---- 地球型 ---- */ /* 循環図：地球（1000×680の座標）に合わせた輪と、輪の上の場面 */ .sl-geo { position: absolute; left: 0; top: 0; width: 100%; aspect-ratio: 1000 / 680; transform: translate(13cqw, 2cqw); } .cyc-svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; } .cyc-ring { fill: none; stroke: rgba(120,217,179,.5); stroke-width: 3; stroke-dasharray: 3 11; stroke-linecap: round; } .cyc-node { position: absolute; transform: translate(-50%, -50%); display: flex; flex-direction: column; align-items: center; padding: .5em 1.1em; border-radius: 1.4em; background: rgba(7,26,45,.94); border: 2px solid var(--c); font-size: var(--fs-l); font-weight: 900; line-height: 1.3; text-align: center; white-space: nowrap; box-shadow: 0 8px 24px rgba(0,0,0,.35); } .cyc-node i { position: absolute; left: 50%; top: -.5em; width: .9em; height: .9em; margin-left: -.45em; border-radius: 50%; background: var(--c); box-shadow: 0 0 10px var(--c); } .cyc-node small { font-size: max(13px, .75em); font-weight: 700; color: #b9d3e2; } /* 締め：地球の下にキャッチ、上に助成の表記 */ .sl--end .sl-txt { top: auto; bottom: 4.2cqw; left: var(--px); right: var(--px); width: auto; align-items: center; text-align: center; } .sl--end .sl-h--xl { white-space: nowrap; text-shadow: 0 4px 30px rgba(4,15,29,.9); } .sl--end .sl-s { font-size: calc(var(--fs-s) * 1.08); } .sl-grant { position: absolute; left: var(--px); right: var(--px); top: 2.6cqw; text-align: center; font-family: var(--f-body); font-size: max(14px, 1.2cqw); font-weight: 700; color: #b9d3e2; } /* 地球の位置：地球型の場面だけ見せる（ほかの場面は画面の外で透明に） */ .stage[data-scene="why"] .globe-pos, .stage[data-scene="sketch"] .globe-pos, .stage[data-scene="proof"] .globe-pos, .stage[data-scene="ai"] .globe-pos, .stage[data-scene="projects"] .globe-pos, .stage[data-scene="hundred"] .globe-pos, .stage[data-scene="road"] .globe-pos, .stage[data-scene="c-catch"] .globe-pos, .stage[data-scene="c-hai"] .globe-pos, .stage[data-scene="c-ratio"] .globe-pos, .stage[data-scene="c-steps"] .globe-pos, .stage[data-scene="c-project"] .globe-pos, .stage[data-scene="c-next"] .globe-pos, .stage[data-scene="c-100"] .globe-pos, .stage[data-scene="c-you"] .globe-pos { transform: translate(500px, 1000px) scale(.6); opacity: 0; } .stage[data-scene="cycle"] .globe-pos, .stage[data-scene="c-cycle"] .globe-pos { transform: translate(630px, 360px) scale(.66); opacity: 1; } .stage[data-scene="c-end"] .globe-pos, .stage[data-scene="you"] .globe-pos { transform: translate(500px, 285px) scale(.8); opacity: 1; } .stage[data-scene="c-cycle"] .orbit, .stage[data-scene="c-cycle"] .orbit-dots { opacity: 0; } .rm .stage[data-scene="you"] .orbit-dots circle { opacity: 1 !important; } /* ---- スマホ：縦長のステージ。絵（写真・地球）を上、文字を下に。文字は14px以上 ---- */ @media (max-width: 640px) { .stage-view { aspect-ratio: 3 / 4; } .slides { --px: 16px; --py: 16px; --col: auto; --fs-k: 14px; --fs-h: 25px; --fs-hx: 26px; --fs-n: 44px; --fs-s: 15px; --fs-l: 14px; --fs-src: 14px; } .sl { display: flex; flex-direction: column; } .sl--m-only { display: flex; } .sl-txt, .sl--wide .sl-txt { position: relative; left: auto; right: auto; top: auto; width: auto; padding: 0 var(--px); } .sl-hero, .sl-src, .sl-chars, .sl-bottom, .sl-stats, .why-catch, .sl-band { position: relative; left: auto; right: auto; top: auto; bottom: auto; width: auto; } .sl-src { margin: auto var(--px) 12px; padding-top: 8px; max-width: none; text-align: left; line-height: 1.4; } .sl-num { font-size: 20px; } .sl-h--xl { white-space: normal; } /* フル画像型：写真を上に、下へ溶かして文字 */ .sl--photo { background: var(--navy); } .sl--photo .sl-media { position: relative; inset: auto; flex: none; height: 66cqw; } .sl--photo .sl-media::after { background: linear-gradient(180deg, rgba(6,26,44,0) 50%, rgba(6,26,44,.6) 78%, var(--navy) 100%); } .sl--photo .sl-txt { margin-top: -6cqw; } .sl-band { padding: 12px var(--px) 0; background: none; font-size: 14px; } .sl-band li + li::before { margin: 0 .45em; } /* 比較型：上下に並べ、矢印は下向き */ .split-p { position: relative; width: 100%; flex: 1; top: auto; bottom: auto; } .split-arrow { position: relative; left: auto; top: auto; margin: -22px auto; width: 44px; height: 44px; font-size: 22px; rotate: 90deg; box-shadow: 0 0 0 5px rgba(6,26,44,.8); } .split-p figcaption { padding: 40px 16px 14px; font-size: 20px; } .split-k { left: 16px; top: 14px; } .split-shots .shots { left: 16px; right: 16px; top: 14px; gap: 8px; grid-template-columns: repeat(4, 1fr); } .split-shots .shots img { border-radius: 6px; } /* データ型：見出しを上、主役をその下に */ .sl--data { padding-top: 16px; gap: 14px; } .ratio-hero { margin: 0 var(--px); } .ratio-field { position: relative; height: 120px; } .ratio-call { position: relative; right: auto; width: auto; margin-top: 10px; padding: 10px 12px; border-radius: 12px; font-size: 14px; } .ratio-call::after { display: none; } .ratio-dot { left: 12px; bottom: 12px; } .ratio-gosa { order: 0; } .sl--hundred100 .sl-hero { order: 2; } .sl--hundred100 .sl-chars { order: 3; } .days-hero { margin: 18px var(--px) 0; width: auto; } .days { grid-template-columns: repeat(20, 1fr); gap: 3px; } .days i { border-radius: 3px; border-width: 1px; } .days-1 { bottom: calc(100% + 3px); } .sl-chars { margin: 0 var(--px); } .sl-chars img { width: 44px; height: 44px; border-width: 2px; margin-right: -8px; } .you-cards { margin: 0 var(--px); grid-template-columns: 1fr 1fr; gap: 10px; align-content: start; } .you-card { border-radius: 12px; } .you-card b { padding: 8px 10px 0; font-size: 15px; } .you-card small { padding: 2px 10px 10px; font-size: 14px; } .why-cards { margin: 0 var(--px); grid-template-columns: 1fr; gap: 8px; } .why-card { display: grid; grid-template-columns: 36px 1fr; column-gap: 10px; align-items: center; padding: 10px 14px; border-radius: 12px; } .why-card b { grid-row: span 2; font-size: 30px; } .why-card p { margin: 0 !important; font-size: 18px; } .why-card small { margin: 0; font-size: 14px; } .why-catch { margin: auto var(--px) 16px; padding: 10px; font-size: 17px; border-radius: 14px; } .chart2 { margin: 0 var(--px); height: 190px; flex: none; } .sl--proof:has(.sl-stats .show) .chart2 { bottom: auto; height: 150px; } .bars { bottom: 34px; gap: 4px; } .bar-c i { border-radius: 3px 3px 0 0; } .bar-c small { display: none; top: calc(100% + 4px); } .bar-c small.mk { display: block; } .bar-c em { bottom: calc(var(--h) + 4px); } .chart-call { right: 15%; } .chart-call b { font-size: 34px; } .chart-call2 { top: 64px; } .sl-stats { margin: 0 var(--px); gap: 6px; } .sl-stats li { flex-direction: column; gap: 0; padding: 8px 10px; border-radius: 10px; } .sl-stats b { font-size: 18px; } .tiles { margin: 0 var(--px); grid-template-columns: repeat(4, 1fr); grid-template-rows: none; gap: 10px 4px; } .tile2 svg { width: 26px; height: 26px; padding: 7px; } .tile2 b { font-size: 14px; } .tile2 small { font-size: 14px; } .calc { margin: 0 var(--px); } .calc-in { grid-template-columns: repeat(3, 1fr); gap: 6px; } .calc-in li { flex-direction: column; align-items: center; padding: 8px 4px; border-radius: 10px; text-align: center; } .calc-in b { font-size: 17px; } .calc-out { margin-top: 8px !important; text-align: center; font-size: 18px; } .sl-bottom { margin: auto var(--px) 14px; font-size: 14px; line-height: 1.5; } .road2 { margin: 0 var(--px); display: flex; flex-direction: column; gap: 10px; } .road2::before { left: 7px; right: auto; top: 8px; bottom: 8px; width: 3px; height: auto; background: linear-gradient(180deg, var(--cyan), var(--hl)); } .road2 li { padding: 0 0 0 28px; } .road2 li::before { top: 2px; width: 17px; height: 17px; border-width: 3px; } .road2 b { font-size: 17px; } .road2 span { margin-top: 2px; font-size: 14px; } /* 地球型：上の 1000×680 の範囲が地球。文字はその下 */ .sl--earth { padding-top: calc(68cqw + 6px); } .sl-geo { transform: none; } .cyc-node { font-size: 14px; padding: .35em .8em; } .cyc-node small { display: none; } .sl--end .sl-txt { position: relative; bottom: auto; padding: 0 var(--px); } .sl--end .sl-grant { position: relative; order: 2; top: auto; margin: auto var(--px) 14px; font-size: 14px; line-height: 1.5; } .stage[data-scene="cycle"] .globe-pos, .stage[data-scene="c-cycle"] .globe-pos { transform: translate(500px, 340px) scale(.66); } .stage[data-scene="c-end"] .globe-pos, .stage[data-scene="you"] .globe-pos { transform: translate(500px, 330px) scale(1.05); } /* 場面1の地球まわりのラベルも14px以上に */ .stage .lbl text { font-size: 42px; } .earth-hint.is-corner { font-size: 14px; } } /* ---- スライド：細部の調整 ---- */ .ratio-call em { white-space: nowrap; } .sl--hundred100 .sl-chars { position: relative; left: auto; bottom: auto; margin: 2.4cqw 0 .6cqw; } .sl--hundred100 .sl-chars img { width: 7.4cqw; height: 7.4cqw; margin-right: -1.3cqw; } .you-cards { top: 18cqw; bottom: 4.6cqw; gap: 1.6cqw; } .you-card img { aspect-ratio: 16 / 10.5; } .you-card b { padding: 1.3cqw 1.5cqw 0; font-size: calc(var(--fs-h) * .6); } .you-card small { padding: .4cqw 1.5cqw 1.5cqw; } @media (max-width: 640px) { .sl--hundred100 .sl-chars { margin: 12px 0 2px; } .sl--hundred100 .sl-chars img { width: 44px; height: 44px; margin-right: -8px; } .you-card b { padding: 8px 10px 0; font-size: 15px; } .you-card small { padding: 2px 10px 10px; } } /* ========================================================================== 中央の再生ボタン（自動再生はしない。押すと音声とBGMつきで始まる） ========================================================================== */ .big-play { position: absolute; left: 50%; top: 50%; z-index: 6; display: none; flex-direction: column; align-items: center; gap: 14px; transform: translate(-50%, -50%); padding: 0; border: 0; background: none; color: #fff; cursor: pointer; } .bp-ring { position: relative; display: grid; place-items: center; width: 120px; height: 120px; border-radius: 50%; background: radial-gradient(circle at 35% 30%, #ffd27a, var(--gold) 55%, #e09a18); box-shadow: 0 14px 40px rgba(0,0,0,.45), inset 0 -4px 10px rgba(0,0,0,.12); transition: transform .2s; } .bp-ring::before, .bp-ring::after { content: ""; position: absolute; inset: 0; border-radius: 50%; border: 3px solid rgba(255,210,122,.8); animation: bpPulse 2.6s ease-out infinite; } .bp-ring::after { animation-delay: 1.3s; } @keyframes bpPulse { 0% { transform: scale(1); opacity: .9; } 100% { transform: scale(1.55); opacity: 0; } } .bp-ring svg { width: 46%; height: 46%; margin-left: 8%; fill: var(--ink); } .big-play:hover .bp-ring, .big-play:focus-visible .bp-ring { transform: scale(1.06); } .big-play:focus-visible { outline: none; } .big-play:focus-visible .bp-ring { box-shadow: 0 0 0 4px #fff, 0 14px 40px rgba(0,0,0,.45); } .bp-label { padding: 6px 16px; border-radius: 999px; background: rgba(4,15,29,.78); font-family: var(--f-head); font-weight: 900; font-size: 1.05rem; line-height: 1.4; white-space: nowrap; box-shadow: 0 6px 18px rgba(0,0,0,.3); } .bp-label small { font-weight: 700; font-size: .9em; margin-left: .2em; color: #ffe3a3; } /* 再生前：1シーン目を少し暗くして、大きなボタン */ .stage-view::after { content: ""; position: absolute; inset: 0; z-index: 5; background: rgba(4,15,29,.48); opacity: 0; pointer-events: none; transition: opacity .4s; } .stage-view.is-idle::after { opacity: 1; } .stage-view.is-paused::after { opacity: .45; } .stage-view.is-idle .big-play, .stage-view.is-paused .big-play { display: flex; } /* 一時停止中：小さめのボタン（ラベルなし） */ .stage-view.is-paused .bp-ring { width: 76px; height: 76px; } .stage-view.is-paused .bp-label { display: none; } .stage-view.is-paused .earth-hint, .stage-view.is-idle .earth-hint { opacity: 0; } .rm .bp-ring::before, .rm .bp-ring::after { animation: none; opacity: 0; } @media (max-width: 640px) { .bp-ring { width: 88px; height: 88px; } .stage-view.is-paused .bp-ring { width: 60px; height: 60px; } .bp-label { font-size: .95rem; } } /* 操作バーのBGMボタン（音符。オフのときは斜線） */ .c-bgm { width: auto; padding: 0 12px 0 10px; border-radius: 999px; gap: 4px; display: inline-flex; align-items: center; } .c-bgm svg { width: 20px; height: 20px; } .c-bgm .bgm-x { opacity: 0; stroke: #ff8c66; } .c-bgm-tx { font-family: var(--f-num); font-weight: 800; font-size: .78rem; letter-spacing: .04em; color: #fff; } .c-bgm:not(.is-off) { border-color: rgba(120,217,179,.6); background: rgba(120,217,179,.14); } .c-bgm.is-off { opacity: .7; } .c-bgm.is-off .bgm-x { opacity: 1; } .c-bgm.is-off .c-bgm-tx { text-decoration: line-through; color: #cfe3ef; } .sl em { white-space: nowrap; } @media (max-width: 640px) { /* スマホは、上の絵（写真・地球）の真ん中にボタンを置き、見出しにかぶせない */ .big-play { top: 34cqw; } } .sl-chip { border-radius: 1.2em; } /* c-you：カードを大きく（画面の写真は上側を見せる） */ .you-cards { top: 19cqw; bottom: 7cqw; grid-template-rows: 1fr; align-content: stretch; } .you-card img { flex: 1; min-height: 0; aspect-ratio: auto; } @media (max-width: 640px) { .you-cards { grid-template-rows: none; } .you-card img { flex: none; aspect-ratio: 16 / 10.5; } } @media (max-width: 640px) { /* .sl p { margin: 0 } より強く（スマホの余白） */ .sl .sl-src { margin: auto var(--px) 12px; } .sl .why-catch { margin: auto var(--px) 16px; } .sl .sl-bottom { margin: auto var(--px) 14px; } .sl--end .sl-h--xl { white-space: normal; } .sl--hundred100 .sl-chars img { width: 54px; height: 54px; } } .tile2 svg { width: 4.6cqw; height: 4.6cqw; } .tile2 b { font-size: calc(var(--fs-l) * 1.12); } @media (max-width: 640px) { .tile2 svg { width: 26px; height: 26px; } .tile2 b { font-size: 14px; } .chart2 { height: 250px; } .sl--proof:has(.sl-stats .show) .chart2 { height: 170px; } } .why-cards { top: 21cqw; } .why-card { padding: 3cqw 2.8cqw; } .split-shots .shots { top: 8cqw; gap: 1.6cqw; } .split-shots .shots img { aspect-ratio: 4 / 3; } .road2 { top: 31cqw; } .road2 b { font-size: 2.9cqw; } .road2 span { font-size: var(--fs-s); } @media (max-width: 640px) { .split-arrow { margin: -22px 16px -22px auto; } .split-shots .shots { grid-template-columns: 1fr 1fr; top: 44px; } .split-shots .shots img { aspect-ratio: 16 / 9; } .sl--sketch .split-r figcaption { padding-top: 24px; } .road2 b { font-size: 17px; } .road2 span { font-size: 14px; } .why-card { padding: 10px 14px; } } @media (max-width: 640px) { /* PC用の位置指定（top/bottom）をスマホでは打ち消す */ .why-cards, .road2, .you-cards, .chart2, .tiles, .calc, .ratio-hero, .days-hero { top: auto; bottom: auto; } .split-shots .shots img:nth-child(n+3) { display: none; } .split-shots .shots { top: 50px; } } /* 小さな補助の文字も14px以上に */ .bar-c small span { font-size: 1em; } .cyc-node small { font-size: max(14px, .75em); } @media (max-width: 640px) { .sl-stats b small { font-size: 14px; } } /* ========================================================================== 審査の修正（2026-10-01） ========================================================================== */ /* 生成画像には右下に「イメージ」（実際の写真ではないことを示す） */ .sl-imgnote { position: absolute; right: 1.2cqw; bottom: .9cqw; z-index: 2; font-family: var(--f-body); font-size: 12px; font-weight: 700; line-height: 1; color: rgba(255,255,255,.6); text-shadow: 0 1px 4px rgba(0,0,0,.6); letter-spacing: .08em; pointer-events: none; } .sl--photo .sl-band ~ .sl-media .sl-imgnote { bottom: 1cqw; } .sl--project-band .sl-imgnote { bottom: auto; top: 1cqw; } /* 色味をそろえる：オレンジが強い画像は彩度を約12%下げる。再生前は写真だけ暗くする */ .sl-img { filter: saturate(var(--sat, 1)) brightness(var(--br, 1)); } .sl-img[src*="scene_many"], .sl-img[src*="scene_haisai"], .sl-img[src*="scene_support"] { --sat: .88; } .stage-view.is-idle .sl-img { --br: .55; } .stage-view.is-paused .sl-img { --br: .75; } .sc.on .sl-img, .sl-img { transition-property: transform, filter; } /* ハイサイクリーン隊：画像は背景の飾り。事実（団体名・約10トン）は数字のパネルで見せる */ .sl--panel .sl-media::after { background: linear-gradient(90deg, rgba(6,26,44,.9) 0%, rgba(6,26,44,.55) 45%, rgba(6,26,44,.25) 100%); } .sl--panel .sl-img { --br: .8; } .stage-view.is-idle .sl--panel .sl-img { --br: .5; } .sl--panel .sl-txt { width: auto; max-width: 42cqw; padding: 2.6cqw 3cqw 2.8cqw; border-radius: 1.6cqw; background: rgba(6,26,44,.86); border: 1.5px solid rgba(255,170,59,.45); box-shadow: 0 20px 50px rgba(0,0,0,.35); text-shadow: none; } /* 1,100万トンの四角は、ほぼ無地に。10トンの1点だけを光らせる */ .ratio-field { background-image: none; background-color: rgba(24,80,120,.32); border-color: rgba(159,195,216,.4); } /* つまずく場所が3つ：止めていても読める明るさに（強調していないカードも白50%以上） */ .why-card p { color: #fff; } .why-card small { color: rgba(255,255,255,.72); } .sl--why:has(.why-catch.show) .why-card.show { opacity: .78; } /* 月500円：学びは無料、も同じくらい目立たせる */ .sl-chip--free { font-size: calc(var(--fs-h) * .56); font-weight: 900; padding: .35em .9em; border: 2px solid var(--sea); background: rgba(120,217,179,.2); color: #eafff6; } /* あなたにできる1歩：段階に合わせて3枚／4枚（コンセプト編・ショートは3枚） */ .you-cards { grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: 1fr; } .sl--you:not(:has(.you-card--chat.show)) .you-card--chat { display: none; } /* ロードマップ：語の途中で改行しない・下の空きを詰める */ .road2 span { word-break: keep-all; overflow-wrap: anywhere; font-size: var(--fs-l); } .road2 { top: 30cqw; } .road2 li { padding-top: 4.4cqw; } .road2 b { font-size: 3.2cqw; } .road2 .road-goal span { font-size: calc(var(--fs-l) * 1.1); } /* ---- 再生前のボタン：見出しのすぐ下に「▶ 再生する 約○分○秒」 ---- */ .stage-view::after { display: none; } .stage-view.is-idle .big-play { display: inline-flex; flex-direction: row; gap: .7em; align-items: center; transform: none; padding: .55em 1.5em .55em .55em; border-radius: 999px; background: var(--gold); color: var(--ink); font-size: max(16px, 1.55cqw); box-shadow: 0 12px 34px rgba(0,0,0,.45); } .stage-view.is-idle .big-play::before { content: ""; position: absolute; inset: 0; border-radius: inherit; border: 3px solid rgba(255,210,122,.85); animation: bpPulse2 2.4s ease-out infinite; pointer-events: none; } @keyframes bpPulse2 { 0% { transform: scale(1); opacity: .9; } 100% { transform: scale(1.18, 1.5); opacity: 0; } } .stage-view.is-idle .bp-ring { width: 2.4em; height: 2.4em; background: var(--ink); box-shadow: none; } .stage-view.is-idle .bp-ring::before, .stage-view.is-idle .bp-ring::after { display: none; } .stage-view.is-idle .bp-ring svg { fill: var(--gold); } .stage-view.is-idle .bp-label { padding: 0; background: none; box-shadow: none; font-size: 1.15em; color: var(--ink); } .stage-view.is-idle .bp-label small { color: rgba(16,43,63,.72); margin-left: .6em; font-family: var(--f-num); font-weight: 600; } .stage-view.is-idle .big-play:hover { filter: brightness(1.06); } .rm .stage-view.is-idle .big-play::before { animation: none; opacity: 0; } /* 一時停止中：中央に小さな丸 */ .stage-view.is-paused .big-play { left: 50% !important; top: 50% !important; bottom: auto !important; } /* 再生前は、操作バーの再生ボタンを控えめに */ .stage-shell.is-idle .c-play { background: rgba(255,255,255,.08); color: #cfe3ef; box-shadow: none; border: 1px solid rgba(255,255,255,.2); } .stage-shell.is-idle .c-play svg { fill: #cfe3ef; } @media (max-width: 640px) { /* 写真は残りの高さいっぱいに（見出しの下に大きな空白を作らない）。文字は下に */ .sl--photo .sl-media { flex: 1 1 auto; height: auto; min-height: 52cqw; } .sl--photo .sl-txt { margin-top: -12cqw; padding-bottom: 16px; } .sl--panel .sl-txt { margin: -16cqw var(--px) 14px; max-width: none; padding: 14px 16px; border-radius: 14px; } .stage-view.is-idle .sc.on .sl-txt { padding-bottom: 76px; } .stage-view.is-idle .sc.on.sl--panel .sl-txt { margin-bottom: 72px; padding-bottom: 14px; } .stage-view.is-idle .big-play { font-size: 16px; } .stage-shell.is-idle .c-play { display: none; } .sl-imgnote { right: 8px; bottom: 6px; } /* 比較型：矢印は下向き、上下の画像の間に余白をとる */ .split-arrow { position: relative; margin: 8px auto; flex: none; box-shadow: none; } .sl--split { gap: 0; background: var(--navy); } .you-cards { grid-auto-flow: row; grid-template-columns: 1fr 1fr; } .road2 span { font-size: 14px; } .road2 li { padding-top: 0; } .road2 b { font-size: 17px; } .chip-free-m { font-size: 16px; } .sl-chip--free { font-size: 16px; } } .road2 { grid-template-columns: repeat(4, 1fr) 1.4fr; } .road2 .road-goal span { font-size: var(--fs-l); } @media (max-width: 640px) { .road2 { top: auto; } } .road2 b { white-space: nowrap; } .road2 b small { display: block; margin: .35em 0 0; } @media (max-width: 640px) { .road2 b small { display: inline; margin-left: .5em; } } /* ========================================================================== 10. v3（台本の書き直しに合わせた場面）：キャラクター・シナジーマップ・ヒーローの循環 ========================================================================== */ /* ---- キャラクター（スプライト：横5コマ＝口 a,i,u,e,o／縦12コマ＝身ぶり。背景は透過） ---- */ .chara { position: relative; display: flex; flex-direction: column; align-items: center; width: var(--cs, 10cqw); } .chara-sp, .chara-fb { position: relative; display: block; width: 100%; aspect-ratio: 1; } .chara-sp { background-repeat: no-repeat; background-size: 500% 1200%; background-position: 50% 0%; filter: drop-shadow(0 1.2cqw 1.6cqw rgba(0,0,0,.4)); } /* まだスプライトが無いキャラ：既存の画像を丸く出して、ゆらす */ .chara-fb { padding: 8%; } .chara-fb img { width: 100%; height: 100%; object-fit: cover; border-radius: 50%; border: max(2px, .35cqw) solid #fff; box-shadow: 0 1cqw 2.4cqw rgba(0,0,0,.4); animation: fbSway 3.2s ease-in-out infinite; transform-origin: 50% 90%; } @keyframes fbSway { 0%, 100% { rotate: -2.5deg; } 50% { rotate: 2.5deg; } } .chara--fb.talk .chara-fb img { animation: fbSway 3.2s ease-in-out infinite, fbTalk .32s ease-in-out infinite alternate; } @keyframes fbTalk { from { scale: 1; } to { scale: 1.035 .97; } } /* 話している間：呼吸のような小さな上下。身ぶりが変わる瞬間に弾む */ .chara.talk .chara-sp { animation: charaBob 1.1s ease-in-out infinite; } @keyframes charaBob { 0%, 100% { translate: 0 0; } 50% { translate: 0 -1.2%; } } .chara.hop .chara-sp, .chara.hop .chara-fb { animation: charaHop .42s cubic-bezier(.3,1.6,.5,1); } @keyframes charaHop { 0% { translate: 0 0; } 40% { translate: 0 -5%; } 100% { translate: 0 0; } } .rm .chara .chara-sp, .rm .chara .chara-fb img { animation: none !important; } /* 入場：下からポンと出る */ .sc.on .chara { animation: charaIn .6s var(--d, 0s) cubic-bezier(.2,1.4,.4,1) both; } @keyframes charaIn { from { opacity: 0; translate: 0 18%; scale: .85; } to { opacity: 1; translate: 0 0; scale: 1; } } .rm .sc.on .chara { animation: none; } .chara-tag { margin-top: .3em; display: inline-flex; gap: .5em; align-items: baseline; padding: .3em .9em; border-radius: 999px; background: rgba(6,26,44,.85); border: 1.5px solid rgba(255,255,255,.2); font-size: var(--fs-l); font-weight: 700; color: #cfe3ef; white-space: nowrap; } .chara-tag b { color: #fff; font-weight: 900; } .face { width: 1.5em; height: 1.5em; border-radius: 50%; object-fit: cover; border: 2px solid #fff; flex: none; } .face--dot { display: inline-block; background: rgba(255,255,255,.25); border-color: rgba(255,255,255,.4); width: .9em; height: .9em; margin: 0 .3em; } /* ---- キャラ型：左にキャラ、右に要点と画面 ---- */ .sl--chara { background: radial-gradient(48% 70% at 22% 62%, rgba(120,217,179,.2), transparent 70%), linear-gradient(180deg, rgba(8,35,57,.94), rgba(4,15,29,.97)); } .ch-stage { position: absolute; left: 2.5cqw; bottom: 3cqw; width: 34cqw; display: flex; justify-content: center; } .chara--xl { --cs: 31cqw; } .chara--xl .chara-tag { font-size: max(15px, 1.75cqw); } .sl--chara .sl-txt { left: 40cqw; width: 54cqw; } .ch-num { margin-top: .5em !important; font-size: calc(var(--fs-h) * .7); font-weight: 900; line-height: 1; } .ch-num b { font-family: var(--f-num); font-weight: 800; font-size: 2.3em; color: var(--hl); margin: 0 .05em; } .ch-pt { margin-top: .8em !important; font-size: calc(var(--fs-h) * .62); font-weight: 900; line-height: 1.35; } .st-chip { display: inline-block; font-size: .7em; padding: .15em .7em; border-radius: 999px; vertical-align: .15em; margin-right: .3em; } .st-chip--prep { background: rgba(255,170,59,.2); color: #ffd08a; border: 1.5px solid rgba(255,170,59,.6); } .ch-flow { margin: 1em 0 0; padding: 0; list-style: none; display: flex; flex-wrap: wrap; gap: .5em 0; font-size: calc(var(--fs-h) * .55); font-weight: 900; } .ch-flow li { display: flex; align-items: center; white-space: nowrap; } .ch-flow li + li::before { content: "→"; margin: 0 .5em; color: rgba(255,255,255,.5); } .ch-shot { position: absolute; left: 40cqw; bottom: 4.4cqw; width: 36cqw; display: block; border-radius: 1.2cqw; overflow: hidden; background: #0e2d49; border: 1.5px solid rgba(255,255,255,.16); box-shadow: 0 16px 40px rgba(0,0,0,.4); text-decoration: none; color: #fff; } .ch-shot img { width: 100%; aspect-ratio: 16 / 8.6; object-fit: cover; object-position: top; } .ch-shot span { display: block; padding: .5em 1em .6em; font-size: var(--fs-l); font-weight: 700; color: #cfe3ef; } .ch-shot:hover { border-color: var(--sea); } /* ---- 交代で一言（v-relay）：いま話すキャラは大きく、話し終えたキャラは下の列へ ---- */ .relay-k { position: absolute; left: var(--px); top: var(--py); } .relay-ch { position: absolute; left: calc(5.6cqw + var(--k) * 12.8cqw); top: 52cqw; width: 11cqw; transition: left .7s cubic-bezier(.3,.8,.3,1), top .7s cubic-bezier(.3,.8,.3,1), width .7s cubic-bezier(.3,.8,.3,1), opacity .5s; } .relay-ch .chara { --cs: 100%; width: 100%; } .relay-ch.now { left: 8cqw; top: 6cqw; width: 30cqw; } .relay-ch.show:not(.now) { opacity: .9; } .sl .relay-ch { translate: none; } .relay-say { position: absolute; left: 112%; top: 30%; width: 50cqw; opacity: 0; transition: opacity .4s; pointer-events: none; } .relay-ch.now .relay-say { opacity: 1; transition-delay: .4s; } .relay-say b { display: block; font-size: var(--fs-hx); font-weight: 900; color: var(--hl); line-height: 1.2; } .relay-say span { display: block; margin-top: .4em; font-size: var(--fs-s); font-weight: 700; color: #cfe3ef; } /* ---- 7人がずらり（v-cast）／締めで手を振る（v-end） ---- */ .cast-row { position: absolute; left: var(--px); right: var(--px); bottom: 4cqw; display: flex; justify-content: space-between; align-items: flex-end; } .cast-ch .chara { --cs: 12cqw; } .cast-ch .chara-tag { flex-direction: column; align-items: center; gap: 0; padding: .3em .7em; font-size: max(14px, 1.2cqw); } .sl .cast-ch, .sl .end-ch { translate: none; } .end-row { position: absolute; left: 50%; bottom: .5cqw; transform: translateX(-50%); display: flex; gap: .4cqw; } .end-ch .chara { --cs: 8.4cqw; } .sl--end .sl-txt { bottom: 12.5cqw; } /* ---- 輪の真ん中のキャラ（ヒーローの循環） ---- */ .cyc-center { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); } .chara--mid { --cs: 17cqw; } .cyc-node .face { margin-right: .4em; width: 1.6em; height: 1.6em; } .cyc-node { flex-direction: row; gap: 0; } .sl--project .cyc-node { padding: .3em .9em .3em .35em; } .sl--project .cyc-node i, .sl--herocyc .cyc-node i { display: none; } .sl--herocyc { background: radial-gradient(50% 60% at 63% 55%, rgba(255,170,59,.14), transparent 70%), linear-gradient(180deg, rgba(8,35,57,.94), rgba(4,15,29,.97)); } .sl--herocyc .cyc-node { flex-direction: column; } /* ---- シナジーマップ（見せ場） ---- */ .sl--synergy { background: radial-gradient(45% 55% at 50% 52%, rgba(24,174,202,.18), transparent 70%), linear-gradient(180deg, rgba(8,35,57,.95), rgba(4,15,29,.97)); } .sl--synergy .sl-h { font-size: calc(var(--fs-h) * .82); } .syn { position: absolute; inset: 0; } .syn-ring { position: absolute; left: 24%; top: 15%; width: 52%; height: 74%; border-radius: 50%; border: .35cqw dashed rgba(120,217,179,.55); } .syn-spokes { position: absolute; inset: 0; width: 100%; height: 100%; } .syn-spokes line { stroke: rgba(255,255,255,.28); stroke-width: 2; stroke-dasharray: 3 6; vector-effect: non-scaling-stroke; } .syn-chev { position: absolute; left: var(--x); top: var(--y); width: 1.6cqw; height: 1.6cqw; margin: -.8cqw 0 0 -.8cqw; border-top: .45cqw solid var(--sea); border-right: .45cqw solid var(--sea); rotate: calc(var(--r) - 45deg); } .syn-dot { position: absolute; left: 0; top: 0; width: .9cqw; height: .9cqw; border-radius: 50%; background: var(--hl); box-shadow: 0 0 1cqw var(--hl); offset-path: ellipse(26% 37% at 50% 52%); offset-rotate: 0deg; offset-distance: var(--o); animation: synFlow 12s linear infinite; } .syn-dot:nth-of-type(even) { background: var(--cyan); box-shadow: 0 0 1cqw var(--cyan); } @keyframes synFlow { from { offset-distance: var(--o); } to { offset-distance: calc(var(--o) + 100%); } } .rm .syn-dot { animation: none; } .syn-new { position: absolute; left: 22%; top: 18%; transform: translate(-50%, -50%); text-align: center; font-size: var(--fs-l); font-weight: 900; color: var(--hl); line-height: 1.3; } .syn-st { position: absolute; left: var(--x); top: var(--y); transform: translate(-50%, -50%); min-width: 19cqw; padding: 1cqw 1.3cqw 1.1cqw; border-radius: 1.3cqw; background: rgba(7,26,45,.95); border: 2px solid var(--c); box-shadow: 0 10px 30px rgba(0,0,0,.4); } .syn-t { display: block; font-size: calc(var(--fs-h) * .55); font-weight: 900; color: var(--c); line-height: 1.2; margin-bottom: .35em; } .syn-st ul, .syn-ideas ul { margin: 0; padding: 0; list-style: none; display: grid; gap: .35em; } .syn-i { display: flex; align-items: center; gap: .45em; font-size: var(--fs-l); font-weight: 700; color: #fff; line-height: 1.25; } .syn-i .face { width: 1.45em; height: 1.45em; } .syn-i--live { color: #fff; } .syn-i--prep { color: #ffe0ad; } .syn-i--prep .face { border-color: var(--gold); } .syn-i--idea { color: #cfd6ff; } /* ナレーションに合わせて、流れが順に光る */ .syn:has(.syn-ring.show) .syn-st { animation: synGlow 1.4s var(--g) ease-out both; } @keyframes synGlow { 0% { box-shadow: 0 0 0 0 var(--c); } 40% { box-shadow: 0 0 0 .8cqw transparent, 0 0 3cqw var(--c); } 100% { box-shadow: 0 10px 30px rgba(0,0,0,.4); } } .syn-crew { position: absolute; left: 50%; top: 52%; transform: translate(-50%, -50%); width: 15cqw; height: 15cqw; border-radius: 50%; display: grid; place-content: center; text-align: center; background: radial-gradient(circle at 40% 35%, #ffd27a, var(--gold) 60%, #d98f12); color: var(--ink); box-shadow: 0 0 0 1cqw rgba(242,177,52,.18), 0 0 4cqw rgba(242,177,52,.5); } .syn-crew b { font-size: calc(var(--fs-h) * .52); font-weight: 900; line-height: 1.2; } .syn-crew span { font-size: var(--fs-l); font-weight: 700; } .syn-ideas { position: absolute; right: var(--px); top: 6cqw; width: 18cqw; padding: 1cqw 1.2cqw; border-radius: 1.2cqw; border: 2px dashed rgba(207,214,255,.5); background: rgba(20,24,60,.6); } .syn-ideas p { font-size: max(14px, 1.2cqw); font-weight: 900; color: #cfd6ff; margin-bottom: .5em !important; } .syn-ideas .syn-i::before { content: ""; width: .55em; height: .55em; border-radius: 50%; border: 2px dashed #cfd6ff; flex: none; } .syn-ideas small { display: block; font-size: .78em; color: #aab3e6; } .syn-ideas .syn-i { flex-wrap: wrap; } .syn-legend { position: absolute; left: var(--px); bottom: 2.4cqw; margin: 0; padding: 0; list-style: none; display: flex; gap: 1.2em; font-size: max(14px, 1.15cqw); font-weight: 700; } .syn-legend li { display: flex; align-items: center; gap: .4em; } .syn-legend li::before { content: ""; width: .8em; height: .8em; border-radius: 50%; background: currentColor; } .syn-legend .syn-i--live { color: var(--sea); } .syn-legend .syn-i--prep { color: var(--gold); } .syn-legend .syn-i--idea { color: #cfd6ff; } .sl .syn-st, .sl .syn-crew, .sl .syn-new { translate: 0 0; } .sl .syn-st:not(.show) { opacity: 0; } /* 地球の位置（v3） */ .stage[data-scene] .globe-pos { transform: translate(500px, 1000px) scale(.6); opacity: 0; } .stage[data-scene="v-earth"] .globe-pos { transform: translate(500px, 300px) scale(1); opacity: 1; } .stage[data-scene="v-project"] .globe-pos { transform: translate(630px, 360px) scale(.66); opacity: 1; } .stage[data-scene="v-end"] .globe-pos { transform: translate(500px, 215px) scale(.62); opacity: 1; } .sl--project .sl-geo { transform: translate(13cqw, 2cqw); } .sl--herocyc .sl-geo { transform: translate(13cqw, 2cqw); } /* ---- スマホ ---- */ @media (max-width: 640px) { .chara-tag { font-size: 14px; } /* キャラ型：上の段にキャラと画面、下に文字 */ .sl--chara:not(.sl--relay):not(.sl--cast) { display: grid; grid-template-columns: 1fr 1fr; grid-template-rows: auto 1fr; align-content: start; padding-top: 10px; } .ch-stage { position: relative; left: auto; bottom: auto; width: auto; grid-column: 1; grid-row: 1; } .chara--xl { --cs: 47cqw; } .chara--xl .chara-tag { font-size: 14px; flex-direction: column; gap: 0; align-items: center; } .ch-shot { position: relative; left: auto; bottom: auto; width: auto; grid-column: 2; grid-row: 1; align-self: center; margin-right: 16px; border-radius: 10px; } .ch-shot span { font-size: 14px; padding: 6px 8px; } .sl--chara .sl-txt { grid-column: 1 / -1; grid-row: 2; left: auto; width: auto; padding: 8px var(--px) 0; } .ch-num { font-size: 18px; } .ch-pt { font-size: 17px; } .ch-flow { font-size: 16px; } .relay-ch { left: calc(10px + var(--k) * 13.6cqw); top: 112cqw; width: 12cqw; } .relay-ch.now { left: 6cqw; top: 14cqw; width: 50cqw; } .relay-say { left: 104%; top: 20%; width: 40cqw; } .relay-say b { font-size: 20px; } .relay-say span { font-size: 14px; } .cast-row { position: relative; left: auto; right: auto; bottom: auto; margin: 10px var(--px) 0; flex-wrap: wrap; justify-content: center; gap: 10px 4px; } .cast-ch .chara { --cs: 23cqw; } .cast-ch .chara-tag { font-size: 14px; padding: 2px 6px; } .sl--end .sl-txt { bottom: auto; } .end-row { position: relative; left: auto; bottom: auto; transform: none; margin: 10px auto 0; gap: 0; } .end-ch .chara { --cs: 12.6cqw; } .stage[data-scene="v-end"] .globe-pos { transform: translate(500px, 330px) scale(1); } .stage[data-scene="v-project"] .globe-pos { transform: translate(500px, 340px) scale(.62); } .sl--project .sl-geo, .sl--herocyc .sl-geo { transform: none; } .sl--herocyc { padding-top: calc(68cqw + 6px); } .chara--mid { --cs: 26cqw; } .cyc-node .face { width: 20px; height: 20px; } /* シナジーマップ：縦長の箱に組み替える */ .sl--synergy { padding-top: 14px; } .syn { position: relative; inset: auto; height: 104cqw; flex: none; margin-top: 8px; } .syn-ring { left: 20%; top: 11%; width: 60%; height: 78%; border-width: 2px; } .syn-chev { left: var(--mx); top: var(--my); width: 8px; height: 8px; margin: -4px 0 0 -4px; border-width: 2px; } .syn-dot { width: 5px; height: 5px; offset-path: ellipse(30% 39% at 50% 50%); } .syn-st { left: var(--mx); top: var(--my); min-width: 0; max-width: 40%; padding: 6px 8px; border-radius: 10px; } .syn-st--know, .syn-st--act { max-width: 80%; } .syn-st--know ul, .syn-st--act ul { grid-auto-flow: column; gap: 4px 10px; } .syn-st--act ul { grid-auto-flow: row; grid-template-columns: 1fr 1fr; } .syn-t { font-size: 15px; } .syn-i { font-size: 14px; } .syn-crew { top: 50%; width: 21cqw; height: 21cqw; box-shadow: 0 0 0 4px rgba(242,177,52,.18); } .syn-crew b { font-size: 14px; } .syn-crew span { display: none; } .syn-new { left: 22%; top: 26%; font-size: 14px; } .syn-ideas { position: relative; right: auto; top: auto; width: auto; margin: 6px var(--px) 0; padding: 8px 10px; } .syn-ideas ul { grid-template-columns: 1fr 1fr; } .syn-ideas small { display: none; } .syn-legend { position: relative; left: auto; bottom: auto; margin: 8px var(--px) 0; flex-wrap: wrap; gap: 4px 12px; } .syn .syn-spokes { display: none; } } @media (max-width: 640px) { .syn { margin-bottom: 96px; } .syn-ideas { position: absolute; top: calc(100% + 6px); left: 0; right: 0; margin: 0 var(--px); } } /* シナジーマップ：「新しい人」は輪の内側（見出しにかぶせない） */ .syn-new { left: 35%; top: 31%; } @media (max-width: 640px) { /* スマホは縦の流れ図に組み替える：知る ↓ 楽しむ ↓ 動く ↓ 発信する ↺ 新しい人 → アースクルー */ .syn { position: relative; height: auto; margin: 6px var(--px) 0; display: flex; flex-direction: column; gap: 14px; } .syn-ring, .syn-chev, .syn-dot, .syn-spokes { display: none !important; } .syn-st { position: relative; left: auto; top: auto; transform: none; max-width: none !important; width: auto; display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; padding: 7px 10px; } .syn-st .syn-t { margin: 0 4px 0 0; font-size: 15px; } .syn-st ul, .syn-st--know ul, .syn-st--act ul { display: flex; flex-wrap: wrap; gap: 3px 10px; grid-auto-flow: unset; } .syn-st--know { order: 1; } .syn-st--play { order: 2; } .syn-st--act { order: 3; } .syn-st--send { order: 4; } .syn-st + .syn-st::before, .syn-st--play::before, .syn-st--act::before, .syn-st--send::before { content: "↓"; position: absolute; left: 50%; top: -15px; transform: translateX(-50%); font-size: 13px; line-height: 1; color: var(--sea); font-weight: 900; } .syn-new { order: 5; position: relative; left: auto; top: auto; transform: none; text-align: left; margin-top: -6px; } .syn-new br { display: none; } .syn-new::before { content: "↺ "; } .syn-crew { order: 6; position: relative; left: auto; top: auto; transform: none; width: auto; height: auto; border-radius: 999px; padding: 6px 12px; display: flex; gap: 8px; justify-content: center; place-content: unset; } .syn-crew span { display: inline; font-size: 14px; } .syn-ideas { order: 7; position: relative; top: auto; left: auto; right: auto; margin: 0; } .syn { margin-bottom: 0; } } .nm-s { display: none; } .syn-ideas { width: 19cqw; } .syn-ideas .syn-i { flex-wrap: nowrap; white-space: nowrap; } @media (max-width: 640px) { .syn .nm-l { display: none; } .syn .nm-s { display: inline; } .syn { gap: 12px; } .syn-st { padding: 5px 10px; } .syn-st .syn-t { font-size: 15px; } .syn-ideas { padding: 6px 10px; } .syn-ideas p { margin-bottom: 2px !important; } .sl--synergy .sl-h { font-size: 21px; } .sl--synergy .sl-k { margin-bottom: .4em !important; } .syn-legend { margin-top: 6px; } } .syn-i .face--dot { width: .75em; height: .75em; margin: 0 .35em; } @media (max-width: 640px) { .syn-ideas { width: auto; } .syn { gap: 10px; } .syn-crew { padding: 4px 12px; } .syn-new { margin-top: -4px; } } /* キャラ型（PC）：キャラを大きく、画面は文字の下に */ @media (min-width: 641px) { .ch-stage { left: 1.5cqw; width: 38cqw; bottom: 3.5cqw; } .chara--xl { --cs: 35cqw; } .sl--chara .sl-txt { top: 7cqw; } .ch-shot { width: 42cqw; bottom: 6cqw; } .syn-crew { justify-content: center; } } @media (max-width: 640px) { .syn-crew { justify-content: center; } } /* 15の取り組み：案内役の顔 */ .pj-chara { display: flex; align-items: center; gap: 8px; margin: 4px 0 6px; font-size: .86rem; color: var(--muted); } .pj-chara img { width: 34px; height: 34px; border-radius: 50%; object-fit: cover; border: 2px solid #fff; box-shadow: 0 2px 8px rgba(0,0,0,.2); } .pj-chara b { color: inherit; font-weight: 800; } /* 暗い色のキャラ（どんぐなど）も背景に沈まないよう、ふちを少し明るく */ .chara-sp { filter: drop-shadow(0 0 .5cqw rgba(200,235,255,.28)) drop-shadow(0 1.2cqw 1.6cqw rgba(0,0,0,.4)); } .chara::before { content: ""; position: absolute; left: 10%; right: 10%; top: 20%; aspect-ratio: 1; border-radius: 50%; background: radial-gradient(circle, rgba(120,217,179,.22), transparent 68%); z-index: -1; } .chara { isolation: isolate; } @media (min-width: 641px) { .ch-stage { left: -1cqw; width: 42cqw; bottom: 2cqw; } .chara--xl { --cs: 41cqw; } .chara--xl .chara-tag { margin-top: -1.5cqw; } } @media (max-width: 640px) { .relay-say b { font-size: 18px; word-break: keep-all; } } @media (min-width: 641px) { .end-ch .chara { --cs: 10cqw; } .sl--end .sl-txt { bottom: 14cqw; } } .sl--cast .sl-txt { left: var(--px); width: auto; right: var(--px); } @media (min-width: 641px) { .sl--cast .sl-txt { top: var(--py); } .cast-ch .chara { --cs: 12.4cqw; } } @media (max-width: 640px) { .sl--cast .sl-txt { padding-top: 16px; } } .relay-ch:not(.now) .relay-say { visibility: hidden; } .st-chip { font-size: max(14px, .7em); } @media (max-width: 640px) { .cast-ch .chara { --cs: 20cqw; } .cast-ch .chara-tag { font-size: 14px; } .cast-ch .chara-tag b + * , .cast-ch .chara-tag { white-space: nowrap; } } @media (max-width: 640px) { .cast-ch .tag-svc { display: none; } .cast-ch .chara-tag { padding: 2px 8px; } } @media (min-width: 641px) { .cast-row { bottom: 9cqw; } .cast-ch .chara { --cs: 12.6cqw; } .cast-ch .chara-tag { font-size: max(14px, 1.15cqw); } } @media (max-width: 640px) { .cast-row { gap: 12px 0; } .cast-ch { flex: 0 0 33.3%; display: flex; justify-content: center; } .cast-ch .chara { --cs: 22cqw; } } /* ---- 再生前のボタンは、ステージの真ん中に（2026-10-01 ユーザー指定）。後ろを少し暗くしてボタンを引き立てる ---- */ .stage-view.is-idle .big-play { left: 50%; top: 50%; bottom: auto; transform: translate(-50%, -50%); } .stage-view.is-idle .big-play:hover { transform: translate(-50%, -50%) scale(1.04); } .stage-view.is-idle::after { display: none; } /* 見出しまで暗くなるので、暗くしない */ .stage-view.is-idle .sc.on .sl-txt { padding-bottom: 0; } @media (max-width: 640px) { /* スマホは、上の絵（写真・地球）の真ん中に */ .stage-view.is-idle .big-play { top: 46cqw; } .stage-view.is-idle .sc.on .sl-txt, .stage-view.is-idle .sc.on.sl--panel .sl-txt { padding-bottom: 14px; margin-bottom: 14px; } } /* ---- 再生していない間は、背景（写真・3Dの地球・キャラ・図）を少し薄くして、再生ボタンと見出しを引き立てる（2026-10-01 ユーザー指定） ---- */ .stage-view.is-idle .sl-img, .stage-view.is-paused .sl-img { --br: .5; --sat: .7; } .stage-view.is-idle .sl--panel .sl-img { --br: .45; } .earth3d, .chara, .sl-media, .sl-fig { transition: filter .5s; } .stage-view.is-idle .earth3d, .stage-view.is-paused .earth3d, .stage-view.is-idle .chara, .stage-view.is-paused .chara { filter: brightness(.55) saturate(.7); } /* 写真のズーム（8秒）と、明るさの切り替え（0.5秒）は別の速さにする */ .sl-img { transition: transform 0s .6s, filter .5s ease; } .sc.on .sl-img { transition: transform 8s cubic-bezier(.3,.1,.3,1), filter .5s ease; } .sc.on .split-l .sl-img { transition: transform 8s cubic-bezier(.3,.1,.3,1), filter 1.2s 1.8s; } /* 再生ボタンがもっと目立つように、再生前の背景をもう一段薄く（2026-10-01 ユーザー指定） */ .stage-view.is-idle .sl-img { --br: .4; --sat: .55; } .stage-view.is-idle .sl--panel .sl-img { --br: .38; } .stage-view.is-idle .earth3d, .stage-view.is-idle .chara { filter: brightness(.45) saturate(.55); } /* ========================================================================== 11. v4（1本の動画）：テロップ・問いかけ・地図（v-map） ========================================================================== */ /* ---- テロップ：太字ゴシック・枠付き。 は金色で少し大きく ---- */ .telop { position: absolute; left: 50%; bottom: 3cqw; z-index: 4; margin: 0; max-width: 88cqw; width: max-content; text-align: center; font-family: "M PLUS 1p", "Noto Sans JP", var(--f-body); font-weight: 900; font-size: 3.4cqw; line-height: 1.3; letter-spacing: .03em; color: #fff; padding: 0 .4em; /* YouTube風：箱は付けず、極太の黒フチ＋影で、どんな背景でも読める */ -webkit-text-stroke: .55cqw #000; paint-order: stroke fill; stroke-linejoin: round; text-shadow: 0 .35cqw 0 #000, 0 .6cqw 1.2cqw rgba(0,0,0,.6); opacity: 0; transform: translate(-50%, 10px) scale(.96); transition: opacity .2s, transform .25s cubic-bezier(.2,1.4,.3,1); pointer-events: none; } .telop.on { opacity: 1; transform: translate(-50%, 0) scale(1); } .telop em, .telop-m em { font-style: normal; color: #ffe14a; font-size: 1.12em; } .telop em { color: #ffe14a; font-size: 1.18em; } /* 出た瞬間に「ポン」と弾ませる（編集のお約束） */ .telop.on { animation: telopPop .35s cubic-bezier(.2,1.8,.4,1); } @keyframes telopPop { 0% { transform: translate(-50%, 12px) scale(.7); } 100% { transform: translate(-50%, 0) scale(1); } } .rm .telop.on { animation: none; } .telop:empty, .stage-view.is-idle .telop { opacity: 0; } .telop-m { display: none; } .rm .telop { transition: none; } @media (max-width: 640px) { .telop { display: none; } .telop-m { display: flex; align-items: center; justify-content: center; min-height: 62px; margin: 0; padding: 8px 12px; background: #061a2c; font-family: "M PLUS 1p", "Noto Sans JP", var(--f-body); font-weight: 900; font-size: 20px; line-height: 1.35; color: #fff; text-align: center; -webkit-text-stroke: 4px #000; paint-order: stroke fill; stroke-linejoin: round; text-shadow: 0 2px 0 #000; } .telop-m:empty::before { content: ""; } .telop-m { opacity: 1; } .telop-m:not(.on) { color: transparent; } .telop-m:not(.on) em { color: transparent; } .telop-m.on { box-shadow: inset 0 0 0 2px rgba(242,177,52,.8); border-radius: 0; } } /* ---- 比較型：ラベルを上に（下はテロップの場所） ---- */ .sl--captop .split-p figcaption { top: 0; bottom: auto; padding: 4.4cqw 3.4cqw 12cqw; background: linear-gradient(180deg, rgba(6,26,44,.9) 20%, rgba(6,26,44,0)); } .sl--captop .split-arrow { top: 50%; } @media (max-width: 640px) { .sl--captop .split-p figcaption { padding: 12px 16px 36px; } } /* データ型：テロップと重ならないよう、主役を少し上に */ @media (min-width: 641px) { .sl--ratio .ratio-hero { bottom: 15cqw; } .sl--ratio .sl-src { bottom: 1.2cqw; } } /* ---- 問いかけ（v-question） ---- */ .sl--question .sl-media::after { background: linear-gradient(90deg, rgba(6,26,44,.95) 0%, rgba(6,26,44,.8) 34%, rgba(6,26,44,.3) 60%, rgba(6,26,44,.1) 100%); } .sl--question .sl-txt { top: 9cqw; width: 56cqw; } .q-pre { font-size: 3.1cqw; font-weight: 900; line-height: 1.35; color: #e6f2f8; } .q-main { margin-top: 1.1em !important; font-size: 5.4cqw; font-weight: 900; line-height: 1.25; } .q-pre em, .q-main em { color: var(--gold); } .q-mark { position: absolute; right: 6cqw; top: 2cqw; font-family: var(--f-num); font-weight: 800; font-size: 34cqw; line-height: 1; color: rgba(242,177,52,.22); pointer-events: none; } @media (max-width: 640px) { .sl--question .sl-txt { width: auto; } .q-pre { font-size: 18px; } .q-main { font-size: 26px; margin-top: .6em !important; } .q-mark { right: 4cqw; top: 4cqw; font-size: 50cqw; } } /* ---- 地図（v-map） ---- */ .sl--map { background: radial-gradient(60% 70% at 50% 42%, rgba(24,174,202,.08), transparent 70%); } .vmap { position: absolute; left: 24cqw; top: 1.5cqw; width: 52cqw; aspect-ratio: 1; container-type: inline-size; transition: transform .6s cubic-bezier(.3,.8,.3,1); } .sl--map.has-sp .vmap { transform: scale(.97); } .vmap-svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; } .vm-glow { opacity: .55; transition: opacity .6s; } .vm-ripple { fill: none; stroke: rgba(242,177,52,.6); stroke-width: 3; opacity: 0; transform-origin: 500px 500px; } .vm-ring { fill: none; stroke: rgba(120,217,179,.28); stroke-width: 6; } .vm-flow { fill: none; stroke: rgba(120,217,179,.75); stroke-width: 6; stroke-dasharray: 6 94; stroke-linecap: round; opacity: .5; animation: vmFlow 8s linear infinite; transition: opacity .5s, stroke .5s; } @keyframes vmFlow { to { stroke-dashoffset: -100; } } .vm-arrow path { fill: rgba(120,217,179,.75); transition: fill .5s; } .vm-runner { transform-origin: 500px 500px; animation: vmSpin 8s linear infinite; } .vm-runner circle { fill: #fff; filter: drop-shadow(0 0 8px #fff); } @keyframes vmSpin { to { rotate: 360deg; } } .vm-albl { position: absolute; transform: translate(-50%, -50%); font-family: var(--f-head); font-weight: 900; font-size: max(14px, 2.7cqw); line-height: 1.3; color: rgba(255,255,255,.55); text-align: center; white-space: nowrap; transition: color .5s, opacity .5s; } .a-ne { left: 83%; top: 21%; } .a-se { left: 83%; top: 79%; } .a-sw { left: 17%; top: 79%; } .a-nw { left: 16%; top: 17%; } .vmap.is-flow .vm-flow { opacity: 1; stroke: var(--gold); animation-duration: 3.2s; } .vmap.is-flow .vm-arrow path { fill: var(--gold); } .vmap.is-flow .vm-runner { animation-duration: 3.2s; } .vmap.is-flow .vm-albl { color: var(--gold); } .vmap[data-hub="cycle"] .vm-ring { stroke: rgba(242,177,52,.35); stroke-width: 12; } .vmap[data-hub="cycle"] .vm-flow { stroke-width: 12; } .vmap.grow .vm-ripple { animation: vmRipple 3s ease-out infinite; animation-delay: var(--d); } @keyframes vmRipple { from { opacity: .9; transform: scale(1); } to { opacity: 0; transform: scale(2.2); } } .vmap.grow .vm-glow { opacity: 1; } .vm-dots { position: absolute; inset: 0; pointer-events: none; } .vm-dots i { position: absolute; left: var(--x); top: var(--y); width: 1.6cqw; height: 1.6cqw; margin: -.8cqw 0 0 -.8cqw; border-radius: 50%; opacity: 0; transform: scale(0); background: var(--sea); } .vm-dots i.c1 { background: var(--gold); } .vm-dots i.c2 { background: var(--coral); } .vm-dots i.c3 { background: var(--cyan); } .vmap.grow .vm-dots i { animation: vmDot .7s var(--d) cubic-bezier(.2,1.5,.4,1) both; } @keyframes vmDot { from { opacity: 0; transform: translate(calc((50% - var(--x)) * 0), 0) scale(0); } to { opacity: .95; transform: scale(1); } } /* 真ん中：地球を囲むアースクルーの輪 */ .vm-crew { position: absolute; left: 50%; top: 50%; width: 36%; aspect-ratio: 1; transform: translate(-50%, -50%); border-radius: 50%; transition: transform .5s, box-shadow .5s, opacity .5s; } .vm-crew-ring { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; animation: vmSpin 18s linear infinite; } .vm-crew-orbit { fill: none; stroke: rgba(242,177,52,.45); stroke-width: 1.6; stroke-dasharray: 3 5; } .vm-crew .pp circle, .vm-crew .pp path { fill: var(--sea); } .vm-crew .pp.c1 circle, .vm-crew .pp.c1 path { fill: var(--gold); } .vm-crew .pp.c2 circle, .vm-crew .pp.c2 path { fill: var(--coral); } .vm-crew .pp.c3 circle, .vm-crew .pp.c3 path { fill: #fff; } .vm-crew-lbl { position: absolute; left: 50%; top: 100%; transform: translate(-50%, -30%); margin: 0; padding: .25em .9em; border-radius: 999px; background: rgba(6,26,44,.9); border: 1.5px solid rgba(242,177,52,.6); text-align: center; line-height: 1.2; white-space: nowrap; } .vm-crew-lbl small { display: block; font-size: max(14px, 2.2cqw); font-weight: 700; color: var(--gold); } .vm-crew-lbl b { display: block; font-family: var(--f-head); font-weight: 900; font-size: max(15px, 3.4cqw); color: #fff; } .vm-crew.lit { box-shadow: 0 0 0 1.2cqw rgba(242,177,52,.18), 0 0 8cqw rgba(242,177,52,.45); } .vm-crew.lit .vm-crew-ring { animation-duration: 6s; } /* 4つの領域 */ .vm-region { position: absolute; padding: 1.4cqw 1.8cqw 1.6cqw; border-radius: 2.4cqw; background: rgba(7,26,45,.9); border: 1.5px solid rgba(255,255,255,.16); box-shadow: 0 10px 30px rgba(0,0,0,.35); transition: opacity .45s, border-color .45s, box-shadow .45s, transform .45s; } .r-hero { left: 50%; top: 0; transform: translateX(-50%); } .r-know { right: -6%; top: 50%; transform: translateY(-50%); } .r-play { left: 50%; bottom: 0; transform: translateX(-50%); } .r-act { left: -6%; top: 50%; transform: translateY(-50%); } .vm-rl { margin: 0 0 .4em; font-family: var(--f-head); font-weight: 900; font-size: max(15px, 3.6cqw); color: #fff; text-align: center; line-height: 1.2; } .vm-rl small { margin-left: .5em; font-size: .6em; color: #9fc3d8; } .vm-region ul { margin: 0; padding: 0; list-style: none; display: grid; gap: .35em; } .vm-chip { display: flex; align-items: center; gap: .45em; padding: .25em .7em .25em .3em; border-radius: 999px; background: rgba(255,255,255,.06); font-weight: 800; font-size: max(14px, 2.6cqw); color: #fff; white-space: nowrap; transition: background .4s, box-shadow .4s, opacity .4s; } .vm-chip .face { width: 1.7em; height: 1.7em; } .vm-chip .face--dot { width: .7em; height: .7em; margin: 0 .5em; } .vm-region .nm-s { display: none; } .vmap.focus .vm-region:not(.lit) { opacity: .28; } .vmap.focus .vm-crew:not(.lit) { opacity: .5; } .vmap.focus .vm-albl { opacity: .3; } .vm-region.lit { border-color: var(--gold); box-shadow: 0 0 0 .8cqw rgba(242,177,52,.18), 0 14px 40px rgba(0,0,0,.45); } .vm-region.lit .vm-chip:not(.lit) { opacity: .55; } .vmap[data-hub="all"] .vm-chip, .vm-chip.lit { opacity: 1; } .vm-chip.lit { background: rgba(242,177,52,.28); box-shadow: inset 0 0 0 1.5px var(--gold); } .vmap.focus .r-hero.lit { transform: translateX(-50%) scale(1.06); } .vmap.focus .r-play.lit { transform: translateX(-50%) scale(1.06); } .vmap.focus .r-know.lit, .vmap.focus .r-act.lit { transform: translateY(-50%) scale(1.06); } /* 3つの壁：レンガのタグ。show＝ドンと立つ（サンゴ色）／solved＝崩れて低い段差（緑） */ .vm-wall { position: absolute; left: var(--x); top: var(--y); z-index: 3; display: flex; flex-direction: column; align-items: center; transform: translate(-50%, -50%) scale(.4); opacity: 0; pointer-events: none; transition: opacity .35s, transform .5s cubic-bezier(.2,1.5,.4,1); } .vm-wl { margin: 0 0 .4em; padding: .3em .8em; border-radius: .6em; background: #b8322a; color: #fff; font-family: "Noto Sans JP", var(--f-body); font-weight: 900; font-size: max(14px, 2.7cqw); line-height: 1.3; text-align: center; white-space: nowrap; box-shadow: 0 6px 18px rgba(0,0,0,.4); transition: background .5s, font-size .5s; } .vm-wl b { display: block; font-size: .78em; color: #ffd2c4; } .vm-brick { position: relative; width: 20cqw; height: 9cqw; border-radius: .6cqw .6cqw .3cqw .3cqw; overflow: hidden; background-color: #e0634d; background-image: linear-gradient(rgba(0,0,0,.28) 1.5px, transparent 1.5px), linear-gradient(90deg, rgba(0,0,0,.28) 1.5px, transparent 1.5px), linear-gradient(90deg, rgba(0,0,0,.28) 1.5px, transparent 1.5px); background-size: 100% 3cqw, 5cqw 6cqw, 5cqw 6cqw; background-position: 0 0, 0 0, 2.5cqw 3cqw; box-shadow: inset 0 -.6cqw 0 rgba(0,0,0,.2), 0 8px 20px rgba(0,0,0,.4); transition: height .9s cubic-bezier(.6,0,.3,1), background-color .7s; } .vm-brick i { position: absolute; width: 3cqw; height: 1.6cqw; background: #e0634d; border-radius: 2px; opacity: 0; } .vm-ok { margin-top: .3em; font-size: max(14px, 2.2cqw); font-weight: 900; color: var(--sea); opacity: 0; transition: opacity .4s .7s; white-space: nowrap; } .vm-wall[data-st="show"], .vm-wall[data-st="solved"] { opacity: 1; transform: translate(-50%, -50%) scale(1); } .vm-wall[data-st="show"].is-cur .vm-brick { animation: wallThud .5s cubic-bezier(.2,1.6,.4,1); } @keyframes wallThud { 0% { transform: translateY(-40%) scaleY(.6); } 60% { transform: translateY(4%) scaleY(1.05); } 100% { transform: none; } } .vm-wall[data-st="show"].is-cur .vm-wl { box-shadow: 0 0 0 .6cqw rgba(255,140,102,.35), 0 6px 18px rgba(0,0,0,.4); } .vm-wall[data-st="solved"] .vm-brick { height: 1.8cqw; background-color: #4fae86; } .vm-wall[data-st="solved"] .vm-wl { background: rgba(28,110,84,.92); font-size: max(14px, 2.1cqw); } .vm-wall[data-st="solved"] .vm-wl b { color: #c9f5e2; } .vm-wall[data-st="solved"] .vm-ok { opacity: 1; } .vm-wall[data-st="solved"] .vm-ok::before { content: "✓ "; } /* 崩れる瞬間：ひびと、こぼれるレンガ */ .vm-wall.crumble .vm-brick { animation: wallShake .35s linear 2; } @keyframes wallShake { 25% { translate: -3px 0; } 75% { translate: 3px 0; } } .vm-wall.crumble .vm-brick i { animation: brickFall .9s .25s ease-in both; } .vm-wall.crumble .vm-brick i:nth-child(1) { left: 10%; top: 10%; } .vm-wall.crumble .vm-brick i:nth-child(2) { left: 45%; top: 5%; animation-delay: .35s; } .vm-wall.crumble .vm-brick i:nth-child(3) { left: 70%; top: 15%; animation-delay: .3s; } .vm-wall.crumble .vm-brick i:nth-child(4) { left: 25%; top: 30%; animation-delay: .4s; } @keyframes brickFall { 0% { opacity: 1; transform: none; } 100% { opacity: 0; transform: translateY(8cqw) rotate(40deg); } } .vm-wall.crumble .vm-brick { overflow: visible; } .rm .vm-wall, .rm .vm-brick, .rm .vm-wall .vm-brick i { transition: none !important; animation: none !important; } /* ---- 話すキャラ：地図の上の自分の場所から、ポンと大きく出てくる ---- */ .vm-sp { position: absolute; z-index: 5; width: 24cqw; left: calc(24cqw + var(--fx) * .52cqw); top: calc(1.5cqw + var(--fy) * .52cqw); transform: translate(-50%, -50%) scale(.12); opacity: 0; pointer-events: none; transition: left .55s cubic-bezier(.2,1.2,.4,1), top .55s cubic-bezier(.2,1.2,.4,1), transform .55s cubic-bezier(.2,1.3,.4,1), opacity .25s; } .vm-sp .chara { --cs: 100%; width: 100%; } .vm-sp.on { opacity: 1; transform: translate(-50%, -50%) scale(1); top: 36cqw; } .vm-sp.vm-side-r.on { left: 87.5cqw; } .vm-sp.vm-side-l.on { left: 12.5cqw; } .sl .vm-sp .chara { animation: none; } /* サービスの画面の枠 */ .vm-frame { position: absolute; z-index: 4; top: 6cqw; width: 27cqw; margin: 0; border-radius: 1.2cqw; overflow: hidden; background: #fff; box-shadow: 0 20px 50px rgba(0,0,0,.55); border: 1.5px solid rgba(242,177,52,.7); opacity: 0; transform: translateY(2cqw) scale(.94) rotate(var(--rot, -1.5deg)); transition: opacity .35s, transform .5s cubic-bezier(.2,1.2,.4,1); pointer-events: none; } .vm-frame.vm-side-l { left: 1.5cqw; } .vm-frame.vm-side-r { right: 1.5cqw; --rot: 1.5deg; } .vm-frame.on { opacity: 1; transform: none; } .fr-bar { display: flex; align-items: center; gap: .45em; padding: .45em .7em; background: #e9eef3; font-size: max(13px, 1.1cqw); color: #44607a; } .fr-bar i { width: .65em; height: .65em; border-radius: 50%; background: #c9d4de; } .fr-bar span { margin-left: .4em; padding: .1em .8em; border-radius: 999px; background: #fff; } .fr-shot { position: relative; } .fr-shot img { display: block; width: 100%; aspect-ratio: 16 / 9; object-fit: cover; object-position: top; } .vm-frame figcaption { display: flex; align-items: center; gap: .5em; padding: .5em .8em; background: #0e2d49; color: #fff; font-size: max(14px, 1.35cqw); font-weight: 800; } .vm-frame figcaption .face { width: 1.8em; height: 1.8em; } .vm-frame--sns .fr-bar { background: #0e2d49; color: #fff; font-weight: 800; } .vm-frame--sns .fr-bar .face { width: 1.8em; height: 1.8em; } .vm-frame--sns .fr-bar b { flex: 1; } .vm-frame--sns .fr-bar span { background: none; color: var(--gold); font-family: var(--f-num); } .fr-play { position: absolute; left: 50%; top: 50%; width: 4cqw; height: 4cqw; margin: -2cqw 0 0 -2cqw; border-radius: 50%; background: rgba(255,255,255,.85); } .fr-play::after { content: ""; position: absolute; left: 40%; top: 28%; border-left: 1.4cqw solid #0e2d49; border-top: .9cqw solid transparent; border-bottom: .9cqw solid transparent; } .fr-like { margin-left: auto; color: var(--coral); } /* 地球の位置（v4） */ .stage[data-scene="v-map"] .globe-pos { transform: translate(500px, 275px) scale(.42); opacity: 1; } @media (max-width: 640px) { .vmap { left: 0; top: 0; width: 100cqw; } .sl--map.has-sp .vmap { transform: none; } .vm-region { padding: 4px 6px 5px; border-radius: 10px; } .r-know { right: 0; } .r-act { left: 0; } .vm-region .nm-l { display: none; } .vm-region .nm-s { display: inline; } .vm-rl { font-size: 15px; margin-bottom: 2px; } .vm-rl small { display: none; } .vm-chip { font-size: 14px; padding: 1px 6px 1px 2px; gap: 4px; } .vm-chip .face { width: 20px; height: 20px; } .vm-albl { display: none; } .vm-crew-lbl small { display: none; } .vm-crew-lbl b { font-size: 14px; } .vm-wl { font-size: 14px; white-space: normal; max-width: 34cqw; } .vm-brick { width: 26cqw; height: 9cqw; } .vm-wall[data-st="solved"] .vm-brick { height: 2.4cqw; } .vm-wall[data-st="solved"] .vm-wl { font-size: 14px; } .vm-ok { font-size: 14px; } .vm-sp { width: 46cqw; left: calc(var(--fx) * 1cqw); top: calc(var(--fy) * 1cqw); } .vm-sp.on { top: 100cqw; } .vm-sp.vm-side-r.on { left: 74cqw; } .vm-sp.vm-side-l.on { left: 26cqw; } .vm-frame { top: 22cqw; width: 58cqw; border-radius: 10px; } .vm-frame.vm-side-l { left: 3cqw; } .vm-frame.vm-side-r { right: 3cqw; } .vm-frame figcaption { font-size: 14px; } .fr-bar { font-size: 12px; } .stage[data-scene="v-map"] .globe-pos { transform: translate(500px, 500px) scale(.78); } } @media (max-width: 640px) { .fr-bar { font-size: 14px; } } /* 地図を大きく（PC） */ @media (min-width: 641px) { .vmap { left: 21cqw; top: .6cqw; width: 58cqw; } .vm-sp { left: calc(21cqw + var(--fx) * .58cqw); top: calc(.6cqw + var(--fy) * .58cqw); } .vm-sp.on { top: 36cqw; } .vm-sp.vm-side-r.on { left: 88cqw; } .vm-sp.vm-side-l.on { left: 12cqw; } .r-know { right: -4%; } .r-act { left: -4%; } } .stage[data-scene="v-map"] .globe-pos { transform: translate(500px, 296px) scale(.46); } @media (max-width: 640px) { .stage[data-scene="v-map"] .globe-pos { transform: translate(500px, 500px) scale(.78); } } @media (max-width: 640px) { .vm-wl { word-break: keep-all; max-width: 40cqw; } .vm-wall[data-w="w1"] { --x: 26% !important; --y: 19% !important; } .vm-wall[data-w="w2"] { --x: 74% !important; --y: 19% !important; } .vm-wall[data-w="w3"] { --x: 72% !important; --y: 72% !important; } .vm-brick { height: 7cqw; } .sl--question .sl-media { flex: 0 0 50cqw; } .sl--question .sl-txt { margin-top: -4cqw; } } /* 地図の高さは幅と同じに固定（中身の動きで縦に伸びないように） */ .vmap { aspect-ratio: auto; height: 52cqw; min-height: 0; } @media (min-width: 641px) { .vmap { height: 58cqw; } } @media (max-width: 640px) { .vmap { height: 100cqw; } } /* 再生ボタンはステージ中央（ユーザー指定）になったので、見出しの下の空け分は不要 */ @media (max-width: 640px) { .stage-view.is-idle .sc.on .sl-txt { padding-bottom: 16px; } .stage-view.is-idle .sc.on.sl--panel .sl-txt { margin-bottom: 14px; } } .vm-wl b { font-size: max(14px, .78em); } @media (max-width: 640px) { .sl--captop .split-arrow { top: auto; } } /* ========================================================================== 12. マーケティング計画（editions.marketing） ========================================================================== */ /* 編のタブ（2つ） */ .ed-tabs--two { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin: 0 0 14px; } .ed-tabs--two .ed-tab b { display: flex; align-items: baseline; gap: .5em; } .ed-tabs--two .ed-dur { font-family: var(--f-num); font-weight: 600; font-size: .78em; opacity: .7; } @media (max-width: 640px) { .ed-tabs--two .ed-tab { padding: 8px 10px; } .ed-tabs--two .ed-tab b { font-size: .92rem; flex-wrap: wrap; } } /* 地球の位置 */ .stage[data-scene="m-open"] .globe-pos, .stage[data-scene="m-end"] .globe-pos { transform: translate(500px, 215px) scale(.62); opacity: 1; } @media (max-width: 640px) { .stage[data-scene="m-open"] .globe-pos, .stage[data-scene="m-end"] .globe-pos { transform: translate(500px, 330px) scale(1); } } /* 話すキャラ（data-speak）：ふだんは隠れていて、話すときにポンと出る */ .pop-sp { position: absolute; z-index: 3; pointer-events: none; opacity: 0; transform: translateY(20%) scale(.6); transition: opacity .25s, transform .5s cubic-bezier(.2,1.4,.4,1); } .pop-sp.on { opacity: 1; transform: none; } .pop-sp .chara { --cs: 100%; width: 100%; } .sl .pop-sp .chara { animation: none; } /* m-now */ .mk-flow { font-size: calc(var(--fs-h) * .48); } .mk-grant { margin-top: 1em !important; display: inline-block; padding: .45em 1em; border-radius: .6em; background: rgba(255,255,255,.08); border: 1.5px solid rgba(255,255,255,.25); font-size: var(--fs-l); font-weight: 700; } @media (min-width: 641px) { .sl--mknow .sl-txt { right: auto; width: 40cqw; } .mk-chart { left: 48cqw; top: 6cqw; bottom: 15cqw; } .sl--mknow .sl-src { bottom: 1.2cqw; } } /* m-funnel：左から右へ */ .fn-shape { position: absolute; left: var(--px); right: var(--px); top: 19cqw; width: calc(100% - 2 * var(--px)); height: 20cqw; } .fn-shape path:first-child { fill: none; } .fn-cone { fill: rgba(24,174,202,.12); stroke: rgba(120,217,179,.35); stroke-width: 2; vector-effect: non-scaling-stroke; } .fn-row { position: absolute; left: var(--px); right: var(--px); top: 20.5cqw; margin: 0; padding: 0; list-style: none; display: grid; grid-template-columns: 1.1fr 1fr 1.15fr 1fr 1.1fr; gap: 1.2cqw; align-items: center; } .fn-st { position: relative; display: flex; flex-direction: column; align-items: center; gap: .3em; padding: 1.2cqw .8cqw 1.3cqw; border-radius: 1.4cqw; background: rgba(7,26,45,.95); border: 1.5px solid rgba(120,217,179,.45); text-align: center; box-shadow: 0 10px 30px rgba(0,0,0,.35); } .fn-st + .fn-st::before { content: "→"; position: absolute; left: -1.25cqw; top: 50%; transform: translate(-50%, -50%); font-family: var(--f-num); font-weight: 800; font-size: 2.2cqw; color: var(--gold); } .fn-st .face { width: 4.6cqw; height: 4.6cqw; } .fn-st b { font-size: calc(var(--fs-h) * .5); font-weight: 900; line-height: 1.2; } .fn-st span { font-size: var(--fs-l); font-weight: 700; color: #b9d3e2; line-height: 1.3; } .fn-st--ai { border-style: dashed; border-color: var(--cyan); background: rgba(24,174,202,.14); } .fn-ai { width: 4.6cqw; height: 4.6cqw; fill: none; stroke: var(--cyan); stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; } .fn-st--goal { border-color: var(--gold); box-shadow: 0 0 0 .6cqw rgba(242,177,52,.15), 0 10px 30px rgba(0,0,0,.35); } .fn-st--goal b { color: var(--gold); } .fn-sp { width: 17cqw; top: 37cqw; left: calc(var(--px) + (var(--k) + .5) * 17.8cqw); margin-left: -8.5cqw; } @media (max-width: 640px) { .fn-shape { display: none; } .fn-row { position: relative; left: auto; right: auto; top: auto; margin: 0 var(--px); grid-template-columns: 1fr; gap: 14px; } .fn-st { flex-direction: row; justify-content: flex-start; padding: 6px 10px; gap: 8px; border-radius: 10px; text-align: left; } .fn-st + .fn-st::before { content: "↓"; left: 50%; top: -12px; transform: translateX(-50%); font-size: 14px; } .fn-st .face, .fn-ai { width: 26px; height: 26px; } .fn-st b { font-size: 16px; } .fn-st span { font-size: 14px; } .fn-sp { width: 34cqw; top: auto; bottom: 0; left: auto; right: 0; margin: 0; } } /* m-sns：スマホのショート動画の枠 */ .phone { position: absolute; left: 9cqw; top: 15cqw; width: 22cqw; aspect-ratio: 9 / 16.5; padding: .7cqw; border-radius: 3cqw; background: #0a0f18; box-shadow: 0 0 0 .35cqw #3a4b5e, 0 24px 60px rgba(0,0,0,.55); } @media (min-width: 641px) { .phone { height: 40cqw; width: auto; } } .ph-screen { position: relative; width: 100%; height: 100%; border-radius: 2.4cqw; overflow: hidden; background: #0e2d49; } .ph-bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: .55; } .ph-duo { position: absolute; left: 0; right: 0; bottom: 3cqw; display: flex; justify-content: center; gap: 0; } .ph-ch { --cs: 11cqw; } .ph-bub { position: absolute; left: 1cqw; right: 1cqw; padding: .5em .7em; border-radius: .8em; background: #fff; color: var(--ink); font-size: max(14px, 1.2cqw); font-weight: 800; line-height: 1.35; box-shadow: 0 6px 16px rgba(0,0,0,.35); } .ph-bub--l { top: 3cqw; margin-right: 3cqw; } .ph-bub--r { top: 10cqw; margin-left: 3cqw; background: #ffe9b8; } .ph-ui { position: absolute; right: .8cqw; bottom: 13cqw; display: grid; gap: .6cqw; font-size: max(14px, 1.4cqw); color: #fff; text-align: center; } .ph-ui i { font-style: normal; text-shadow: 0 2px 6px rgba(0,0,0,.6); } .ph-bar { position: absolute; left: 1cqw; right: 1cqw; bottom: 1cqw; height: .35cqw; border-radius: 99px; background: rgba(255,255,255,.3); } .ph-bar i { display: block; width: 40%; height: 100%; border-radius: inherit; background: #fff; } .sc.on .ph-bar i { animation: phBar 9s linear infinite; } @keyframes phBar { from { width: 0; } to { width: 100%; } } .phone .sl-imgnote { right: 1cqw; bottom: 2cqw; font-size: 12px; } .mk-right { position: absolute; left: 40cqw; right: var(--px); top: 18cqw; } .mk-right .mk-flow { font-size: calc(var(--fs-h) * .62); } .mk-chips { margin-top: 3cqw; padding: 1.6cqw 2cqw; border-radius: 1.4cqw; background: rgba(7,26,45,.92); border: 1.5px solid rgba(242,177,52,.5); } .mk-chips p { font-size: var(--fs-s); font-weight: 900; } .mk-chips ul { margin: .6em 0 0; padding: 0; list-style: none; display: flex; gap: .6em; } .mk-chips li { padding: .3em 1em; border-radius: 999px; background: rgba(242,177,52,.18); border: 1.5px solid var(--gold); font-size: calc(var(--fs-h) * .5); font-weight: 900; } .mk-chips small { display: block; margin-top: .8em; font-size: var(--fs-src); color: #9fbdd0; } @media (max-width: 640px) { .phone { position: relative; left: auto; top: auto; width: 42cqw; margin: 4px auto 0; flex: none; border-radius: 18px; padding: 4px; } .ph-screen { border-radius: 14px; } .ph-ch { --cs: 20cqw; } .ph-duo { bottom: 6cqw; } .ph-bub { font-size: 14px; left: 4px; right: 4px; } .ph-bub--l { top: 8px; } .ph-bub--r { top: 76px; } .ph-ui { display: none; } .mk-right { position: relative; left: auto; right: auto; top: auto; margin: 10px var(--px) 0; } .mk-right .mk-flow { font-size: 16px; margin-top: 0; } .mk-chips { margin-top: 8px; padding: 8px 10px; border-radius: 10px; } .mk-chips li { font-size: 15px; } } /* m-hero */ .mk-steps { margin: 1.2em 0 0; padding: 0; list-style: none; display: grid; gap: .5em; } .mk-steps li { display: flex; flex-direction: column; padding: .5em .9em; border-left: .35cqw solid var(--sea); background: rgba(6,26,44,.72); border-radius: 0 .6em .6em 0; font-size: var(--fs-l); font-weight: 700; color: #cfe3ef; } .mk-steps li b { font-size: 1.25em; color: #fff; } .mk-steps li.stp--goal b { color: var(--gold); } .hero-sp { right: 3cqw; bottom: 9cqw; width: 26cqw; } @media (max-width: 640px) { .mk-steps li { font-size: 14px; padding: 4px 8px; } .hero-sp { right: 0; bottom: auto; top: 6cqw; width: 40cqw; } } /* m-game：カードを扇形に・ゆっくり3Dで傾ける */ .cards { position: absolute; left: 6cqw; top: 15cqw; width: 42cqw; height: 40cqw; perspective: 1200px; } .card { position: absolute; left: 50%; bottom: 6cqw; width: 13.5cqw; margin-left: -6.75cqw; border-radius: .8cqw; box-shadow: 0 16px 36px rgba(0,0,0,.55); transform-origin: 50% 110%; transition: transform .9s cubic-bezier(.2,1.2,.4,1); } .card.c0 { transform: rotate(-24deg) translateX(-2cqw); } .card.c1 { transform: rotate(-8deg); } .card.c2 { transform: rotate(8deg); } .card.c3 { transform: rotate(24deg) translateX(2cqw); } .cards:not(.show) .card { transform: none; } .sc.on .cards.show { animation: cardTilt 7s ease-in-out infinite; transform-style: preserve-3d; } @keyframes cardTilt { 0%, 100% { transform: rotateY(-12deg) rotateX(4deg); } 50% { transform: rotateY(12deg) rotateX(-2deg); } } .rm .sc.on .cards.show { animation: none; } .cards-lbl { position: absolute; left: 0; right: 0; bottom: -1cqw; text-align: center; font-size: calc(var(--fs-h) * .6); font-weight: 900; } .cards-lbl b { font-family: var(--f-num); font-weight: 800; font-size: 2em; color: var(--gold); margin-right: .1em; } .cards-lbl span { display: block; font-size: var(--fs-l); color: #cfe3ef; } .rb { position: absolute; left: 54cqw; right: var(--px); top: 16cqw; } .rb-thumb { position: relative; } .rb-thumb img:first-child { width: 100%; border-radius: 1.2cqw; box-shadow: 0 16px 40px rgba(0,0,0,.5); } .rb-icon { position: absolute; right: -1.5cqw; bottom: -2cqw; width: 9cqw; height: 9cqw; border-radius: 1.6cqw; border: .3cqw solid #fff; box-shadow: 0 10px 24px rgba(0,0,0,.5); } .rb p { margin-top: 1.4em !important; font-size: calc(var(--fs-h) * .55); font-weight: 900; } .rb p b { color: var(--gold); margin-right: .3em; } @media (max-width: 640px) { .cards { position: relative; left: auto; top: auto; width: auto; height: 200px; margin: 0 var(--px); flex: none; } .card { width: 22cqw; margin-left: -11cqw; bottom: 40px; } .cards-lbl { bottom: 0; font-size: 16px; } .cards-lbl span { font-size: 14px; display: inline; margin-left: .5em; } .rb { position: relative; left: auto; right: auto; top: auto; margin: 6px var(--px) 0; display: grid; grid-template-columns: 40% 1fr; gap: 10px; align-items: center; } .rb-icon { width: 36px; height: 36px; right: -6px; bottom: -6px; border-radius: 8px; } .rb p { margin: 0 !important; font-size: 15px; } } /* m-future：広がっていく輪 */ .fut { position: absolute; left: 44cqw; top: 3cqw; width: 52cqw; height: 52cqw; } .fut-ring, .fut-core { position: absolute; left: 50%; top: 50%; border-radius: 50%; transform: translate(-50%, -50%); display: flex; justify-content: center; text-align: center; } .fut-r3 { width: 100%; height: 100%; border: 2px dashed rgba(242,177,52,.6); background: radial-gradient(circle, rgba(242,177,52,.08), transparent 70%); align-items: flex-start; padding-top: 2.5cqw; } .fut-r2 { width: 62%; height: 62%; border: 2px solid rgba(120,217,179,.6); background: rgba(24,174,202,.1); align-items: flex-start; padding-top: 2cqw; } .fut-core { width: 26%; height: 26%; align-items: center; background: radial-gradient(circle at 40% 35%, #ffd27a, var(--gold) 60%, #d98f12); color: var(--ink); box-shadow: 0 0 4cqw rgba(242,177,52,.5); } .fut-ring span { font-size: calc(var(--fs-h) * .55); font-weight: 900; color: #fff; line-height: 1.25; } .fut-r3 span { color: var(--gold); } .fut-ring small { display: block; font-size: max(14px, .55em); color: #b9d3e2; } .fut-core b { font-size: max(14px, 1.7cqw); font-weight: 900; } .fut-sat { position: absolute; left: var(--x); top: var(--y); transform: translate(-50%, -50%); padding: .35em 1em; border-radius: 999px; background: rgba(7,26,45,.95); border: 1.5px solid var(--sea); font-size: var(--fs-l); font-weight: 900; white-space: nowrap; } .sl .fut-ring, .sl .fut-core, .sl .fut-sat { translate: none; } .fut-ring.ln, .fut-core.ln { transition: opacity .8s var(--d, 0s), transform .9s var(--d, 0s) cubic-bezier(.2,1.2,.4,1); } .fut-ring.ln:not(.show), .fut-core.ln:not(.show) { transform: translate(-50%, -50%) scale(.6); } @media (max-width: 640px) { .fut { position: relative; left: auto; top: auto; width: 86cqw; height: 86cqw; margin: 6px auto 0; flex: none; } .fut-ring span { font-size: 15px; } .fut-r3 { padding-top: 10px; } .fut-r2 { padding-top: 8px; } .fut-sat { font-size: 14px; } .fut-core b { font-size: 14px; } } /* マーケティング計画：調整 */ @media (max-width: 640px) { .telop-m { display: block; padding: 10px 12px; } .phone { width: 32cqw; } .ph-bub { font-size: 14px; } .ph-bub--r { top: 64px; } .mk-chips small { display: none; } } @media (min-width: 641px) { .phone { top: 19.5cqw; height: 37cqw; } .sl--future .sl-txt { width: 40cqw; } .sl--future .sl-h { font-size: calc(var(--fs-h) * .86); } .card { width: 16cqw; margin-left: -8cqw; } .cards { top: 13cqw; height: 44cqw; } .rb p { white-space: nowrap; font-size: calc(var(--fs-h) * .5); } .fn-st span { font-size: max(14px, 1.4cqw); } } @media (min-width: 641px) { .sl--future .sl-h { font-size: calc(var(--fs-h) * .76); } .cards-lbl { bottom: -4.5cqw; } .card { bottom: 8cqw; } } @media (max-width: 640px) { .phone { width: 54cqw; aspect-ratio: 13 / 16; } .ph-ch { --cs: 18cqw; } .ph-duo { bottom: 3cqw; } .ph-bub--r { top: 58px; } } /* m-hero：動画ドラフト（横の一場面＋スマホの縦動画） */ .hv-main { position: absolute; left: 44cqw; top: 6cqw; width: 42cqw; margin: 0; border-radius: 1.2cqw; overflow: hidden; background: #000; box-shadow: 0 20px 50px rgba(0,0,0,.5); border: 1.5px solid rgba(255,255,255,.18); } .hv-main video { display: block; width: 100%; aspect-ratio: 16 / 9; object-fit: cover; } .hv-main figcaption { padding: .5em .9em; background: #0e2d49; font-size: var(--fs-l); font-weight: 800; color: #cfe3ef; } .hv-phone { left: auto; right: 4cqw; top: 22cqw; height: 32cqw; } .hv-phone video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; } .sl--mkhero .hero-sp { left: 44cqw; right: auto; bottom: 8cqw; width: 20cqw; } .rm .sl--mkhero video { display: none; } /* m-sns：参考事例カード（他アカウントの写真は使わない） */ .ref-card { margin-top: 1.6cqw; padding: 1.2cqw 1.6cqw; border-radius: 1.2cqw; background: rgba(255,255,255,.06); border: 1.5px dashed rgba(255,255,255,.35); } .ref-k { font-size: var(--fs-src); font-weight: 700; color: #9fbdd0; } .ref-name { margin-top: .2em !important; font-size: calc(var(--fs-h) * .5); font-weight: 900; } .ref-name span { margin-left: .5em; font-size: .6em; color: #9fbdd0; font-weight: 700; } .ref-num { margin-top: .2em !important; font-size: var(--fs-l); font-weight: 700; color: #cfe3ef; } .ref-num b { font-family: var(--f-num); font-weight: 800; font-size: 1.6em; color: var(--gold); margin-right: .2em; } .ref-num span { margin-left: .8em; } .ref-c { margin-top: .2em !important; font-size: var(--fs-l); font-weight: 800; } .ref-card small { display: block; margin-top: .3em; font-size: var(--fs-src); color: #9fbdd0; } .mk-chips { margin-top: 2cqw; } @media (max-width: 640px) { .hv-main { position: relative; left: auto; top: auto; width: auto; margin: 0 var(--px); flex: none; border-radius: 10px; order: -1; } .sl--mkhero { padding-top: 0; } .hv-main figcaption { font-size: 14px; padding: 4px 8px; } .hv-phone { position: absolute; right: 10px; top: 30cqw; width: 22cqw; height: auto; aspect-ratio: 9 / 16; margin: 0; border-radius: 12px; padding: 3px; } .sl--mkhero .sl-txt { padding-top: 10px; } .sl--mkhero .hero-sp { left: auto; right: 0; bottom: 0; width: 34cqw; } .ref-card { margin-top: 8px; padding: 6px 10px; border-radius: 10px; } .ref-name { font-size: 16px; } .ref-num, .ref-c { font-size: 14px; } .ref-card small, .ref-k { font-size: 12px; } .ref-card small { display: none; } .mk-chips { margin-top: 6px; } .mk-chips p { font-size: 14px; } } @media (max-width: 640px) { .ref-k { font-size: 14px; } .sl--sns .mk-chips { display: none; } } .hv-main video { height: auto; } @media (min-width: 641px) { .hv-main { left: 48cqw; width: 37cqw; } .hv-phone { right: 3cqw; top: 24cqw; height: 30cqw; } .sl--mkhero .hero-sp { left: 46cqw; } } @media (max-width: 640px) { .mk-steps { margin-top: 8px; gap: 4px; } .mk-steps li { flex-direction: row; gap: 8px; align-items: baseline; } .mk-steps li b { font-size: 15px; } .mk-steps li span { font-size: 14px; } .sl--mkhero .sl-h { font-size: 22px; } .sl--sns .phone { width: 44cqw; } .ref-c { display: none; } .ref-card { margin-top: 6px; } } /* m-game：カードの下のラベルがテロップにかぶらないよう、カードを少し上へ・ラベルを1行に（PC） */ @media (min-width: 641px) { .sl--game .cards { top: 20cqw; height: 29.5cqw; } .sl--game .cards-lbl { bottom: .5cqw; } .sl--game .cards-lbl span { display: inline; margin-left: .6em; } } /* m-future：お金が入ってくる側（寄付会員・協賛企業）は金色、生まれる企画はミント */ .fut-sat.fut-in { background: rgba(242,177,52,.18); border-color: rgba(242,177,52,.7); color: #ffe3a3; } .fut-sat.fut-out { background: rgba(120,217,179,.16); border-color: rgba(120,217,179,.7); color: #c8f3e2; } /* 3つの課題：レンガのブロックはやめて、札だけ（課題＝赤 → 解決＝緑）（2026-10-02 ユーザー指定） */ .vm-brick { display: none !important; } .vm-wl { font-size: max(14px, 2.3cqw); padding: .45em 1em; border: 2px solid rgba(255,255,255,.18); } .vm-wall[data-st="show"].is-cur .vm-wl { animation: issuePop .45s cubic-bezier(.2,1.6,.4,1); } @keyframes issuePop { 0% { transform: scale(.6); } 100% { transform: scale(1); } } .vm-wall[data-st="solved"] .vm-wl { background: #1f8a62; font-size: max(14px, 2.1cqw); } .vm-ok { margin-top: .35em; padding: .15em .7em; border-radius: 999px; background: rgba(31,138,98,.9); color: #fff; font-size: max(13px, 1.6cqw); transition: opacity .4s .3s; } .vm-wall.crumble .vm-wl { animation: issueSolve .5s ease; } @keyframes issueSolve { 40% { transform: scale(1.12); } 100% { transform: scale(1); } } /* 地図の場面では「ドラッグで回せます」を出さない（アースクルーの文字にかぶるため） */ .stage-view:has(.sc.on[data-k="v-map"]) .earth-hint { display: none !important; } /* 下に並んだキャラ：全員が少しずつずれて弾む（2026-10-02 ユーザー指定「並べているキャラを動かして」） */ .sc.on .end-ch .chara-sp, .sc.on .cast-ch .chara-sp { animation: lineupBob 1.3s ease-in-out infinite; transform-origin: 50% 100%; } .sc.on .end-ch:nth-of-type(2n) .chara-sp, .sc.on .cast-ch:nth-of-type(2n) .chara-sp { animation-delay: -.45s; } .sc.on .end-ch:nth-of-type(3n) .chara-sp, .sc.on .cast-ch:nth-of-type(3n) .chara-sp { animation-delay: -.85s; } @keyframes lineupBob { 0%, 100% { translate: 0 0; scale: 1 1; } 45% { translate: 0 -7%; scale: .98 1.02; } 60% { translate: 0 -7%; } 85% { translate: 0 0; scale: 1.03 .97; } } .rm .sc.on .end-ch .chara-sp, .rm .sc.on .cast-ch .chara-sp { animation: none; } /* ========================================================================== 13. 地図：視線を1か所に集める「焦点カード」（2026-10-02） ・個別のサービスの話のときは、地図を背景に下げ（小さく・暗く・ぼかす）、 手前に「課題の帯＋サービスの画面＋話すキャラ」を1つのカードにまとめて出す ・地図の上の課題の札は、全体を見せるせりふと、課題を紹介するせりふのときだけ ========================================================================== */ .vmap { transition: transform .55s cubic-bezier(.3,.8,.3,1), filter .55s, opacity .55s; } .sl--map.has-sp .vmap { transform: none; } .sl--map.has-focus .vmap { transform: scale(.9); filter: brightness(.5) saturate(.7) blur(1.5px); } .vm-dim { position: absolute; inset: 0; z-index: 3; background: rgba(4,15,29,.5); -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px); opacity: 0; transition: opacity .45s; pointer-events: none; } .sl--map.has-focus .vm-dim { opacity: 1; } /* 地図の上の札：焦点カードの間は出さない。課題を紹介するせりふでは、その1つだけ大きく */ .sl--map.has-focus .vm-wall { opacity: 0 !important; } .vmap.w-intro .vm-wall:not(.is-cur) { opacity: .3; transform: translate(-50%, -50%) scale(.85); } .vmap.w-intro .vm-wall.is-cur { z-index: 6; transform: translate(-50%, -50%) scale(1.35); } .vmap.w-intro .vm-wall.is-cur .vm-wl { box-shadow: 0 0 0 .8cqw rgba(224,99,77,.28), 0 14px 34px rgba(0,0,0,.5); } .vmap.w-intro .vm-region:not(.lit), .vmap.w-intro .vm-crew { opacity: .35; } /* 焦点カード */ .vm-focus { position: absolute; z-index: 5; top: 6.5cqw; width: 38cqw; opacity: 0; pointer-events: none; transform: translateY(2cqw) scale(.96); transition: opacity .35s, transform .5s cubic-bezier(.2,1.2,.4,1); } .vm-focus.fc-r { right: 5cqw; } .vm-focus.fc-l { left: 11cqw; } .sl--map.has-focus .vm-focus { opacity: 1; transform: none; } .fc-issue { display: flex; align-items: center; gap: .6em; margin: 0; padding: .5em 1em; border-radius: 1cqw 1cqw 0 0; background: #c0392b; color: #fff; font-family: "Noto Sans JP", var(--f-body); font-weight: 900; font-size: max(14px, 1.7cqw); line-height: 1.3; transition: background .5s; } .fc-issue[hidden] { display: none; } .fc-no { padding: .1em .6em; border-radius: 999px; background: rgba(255,255,255,.22); font-size: .85em; white-space: nowrap; } .fc-tt { flex: 1; } .fc-ok { font-style: normal; padding: .15em .7em; border-radius: 999px; background: #fff; color: #1f8a62; font-size: .85em; white-space: nowrap; opacity: 0; transform: scale(.6); transition: opacity .3s .25s, transform .4s .25s cubic-bezier(.2,1.6,.4,1); } .fc-issue.is-solved { background: #1f8a62; } .fc-issue.is-solved .fc-ok { opacity: 1; transform: none; } .fc-frame { display: none; margin: 0; overflow: hidden; background: #fff; border-radius: 0 0 1cqw 1cqw; box-shadow: 0 24px 60px rgba(0,0,0,.6); border: 2px solid rgba(242,177,52,.8); } .fc-issue:not([hidden]) + .fc-frame, .fc-issue:not([hidden]) ~ .fc-frame { border-top: 0; } .fc-issue[hidden] ~ .fc-frame { border-radius: 1cqw; } .fc-frame.on { display: block; } .fc-frame figcaption { display: flex; align-items: center; gap: .5em; padding: .55em .9em .55em 9cqw; background: #0e2d49; color: #fff; font-size: max(14px, 1.45cqw); font-weight: 800; } .fc-frame figcaption .face { width: 1.8em; height: 1.8em; } .fc-frame--sns .fr-bar { background: #0e2d49; color: #fff; font-weight: 800; } .fc-frame--sns .fr-bar .face { width: 1.8em; height: 1.8em; } .fc-frame--sns .fr-bar b { flex: 1; } .fc-frame--sns .fr-bar span { background: none; color: var(--gold); font-family: var(--f-num); } .fc-frame--sns figcaption { padding-left: 9cqw; } /* 話すキャラ：カードの左下にかぶせる */ .fc-sp { position: absolute; left: -7cqw; bottom: -4cqw; width: 16cqw; opacity: 0; transform: translateY(20%) scale(.5); transition: opacity .25s, transform .5s cubic-bezier(.2,1.4,.4,1); } .fc-sp.on { opacity: 1; transform: none; } .fc-sp:not(.on) { transition: none; } /* 話し手が交代するときは前の話し手を一瞬で消す（次の話し手が画面の外から歩いて・飛んで来る間に、前の人が残って見えないように） */ .fc-sp .chara { --cs: 100%; width: 100%; } .sl .fc-sp .chara { animation: none; } .fc-sp .chara-tag { font-size: max(14px, 1.2cqw); } @media (max-width: 640px) { .sl--map.has-focus .vmap { transform: scale(.94); } .vm-focus, .vm-focus.fc-l, .vm-focus.fc-r { left: 8cqw; right: auto; top: 5cqw; width: 84cqw; } .fc-issue { font-size: 15px; padding: 6px 10px; border-radius: 10px 10px 0 0; } .fc-frame { border-radius: 0 0 10px 10px; } .fc-issue[hidden] ~ .fc-frame { border-radius: 10px; } .fc-frame figcaption { font-size: 14px; padding-left: 32cqw; } .fc-sp { left: -6cqw; bottom: -14cqw; width: 36cqw; } .fc-sp .chara-tag { display: none; } .vmap.w-intro .vm-wall.is-cur { transform: translate(-50%, -50%) scale(1.15); } } /* シードの焦点カード：学ぶ・動く → ポイント → 協賛イベント／アースクラスター／覇国創世 */ .fc-point { background: linear-gradient(180deg, #0e2d49, #0a2238); } .pt-flow { display: flex; flex-direction: column; align-items: center; gap: .7cqw; padding: 2cqw 2cqw 1.6cqw; color: #fff; } .pt-src { margin: 0; padding: 0; list-style: none; display: grid; grid-template-columns: repeat(3, auto); gap: .8cqw; justify-content: center; } .pt-src li { display: flex; align-items: center; gap: .4em; padding: .3em .8em .3em .3em; border-radius: 999px; background: rgba(255,255,255,.1); font-size: max(14px, 1.25cqw); font-weight: 800; white-space: nowrap; } .pt-src .face { width: 1.7em; height: 1.7em; } .pt-arr { width: 1.6cqw; height: 2.2cqw; background: var(--gold); clip-path: polygon(35% 0, 65% 0, 65% 55%, 100% 55%, 50% 100%, 0 55%, 35% 55%); } /* アースプロジェクトの通貨「シード」の3Dコイン：表と裏の面（画像）のあいだに縁の円盤を13枚重ねて厚みを出し、Y軸でゆっくり回す。表面に光が走る */ .pt-coin { --cw: 10cqw; position: relative; display: flex; flex-direction: column; align-items: center; gap: .3cqw; } .sd-stage { position: relative; width: var(--cw); aspect-ratio: 1; perspective: calc(var(--cw) * 6); } .sd-stage::before { content: ""; position: absolute; inset: -30%; border-radius: 50%; background: radial-gradient(circle, rgba(242,177,52,.55), rgba(120,217,140,.18) 45%, transparent 70%); animation: sdGlow 3.2s ease-in-out infinite; } .sd-coin { position: absolute; inset: 0; transform-style: preserve-3d; animation: sdSpin 7s linear infinite; } .sd-face, .sd-edge { position: absolute; inset: 0; border-radius: 50%; } .sd-face { backface-visibility: hidden; overflow: hidden; } .sd-face img { display: block; width: 100%; height: 100%; } .sd-front { transform: translateZ(calc(var(--cw) * .06)); } .sd-back { transform: rotateY(180deg) translateZ(calc(var(--cw) * .06)); } .sd-edge { inset: .4%; background: repeating-conic-gradient(#b67a0c 0 2deg, #f6cd55 2deg 4deg); transform: translateZ(calc(var(--cw) * (var(--z) - 6) * .0095)); } /* 表面を斜めに走る光 */ .sd-face::after { content: ""; position: absolute; inset: 0; border-radius: 50%; background: linear-gradient(115deg, transparent 35%, rgba(255,255,255,.55) 48%, transparent 60%); background-size: 300% 100%; mix-blend-mode: overlay; animation: sdShine 3.5s ease-in-out infinite; } .sd-shadow { position: absolute; left: 15%; right: 15%; bottom: -16%; height: 10%; border-radius: 50%; background: rgba(0,0,0,.45); filter: blur(4px); animation: sdShadow 3.5s linear infinite; } .sd-name { display: flex; align-items: baseline; gap: .35em; margin-top: .9cqw; font-size: max(15px, 1.5cqw); font-weight: 900; color: #fff; letter-spacing: .08em; text-shadow: 0 0 1.2cqw rgba(242,177,52,.8); } .sd-name small { font-family: var(--f-num); font-size: .7em; font-weight: 800; color: #9be78a; letter-spacing: .18em; } @keyframes sdSpin { 0% { transform: rotateX(-10deg) rotateY(0deg); } 100% { transform: rotateX(-10deg) rotateY(360deg); } } @keyframes sdShine { 0%, 40% { background-position: 120% 0; } 100% { background-position: -20% 0; } } @keyframes sdGlow { 0%, 100% { opacity: .7; transform: scale(.92); } 50% { opacity: 1; transform: scale(1.05); } } @keyframes sdShadow { 0%, 50%, 100% { transform: scaleX(1); } 25%, 75% { transform: scaleX(.35); } } /* 07章カードのシード：右側に大きく置き、ドラッグで回せる（回転は JS が transform で直接動かす） */ .pj-art--point { container-type: inline-size; } .pj-seed { position: absolute; right: 9cqw; top: 50%; transform: translateY(-50%); display: flex; flex-direction: column; align-items: center; } .pj-seed .sd-stage { --cw: 40cqw; width: var(--cw); } .sd-drag { cursor: grab; touch-action: pan-y; user-select: none; -webkit-user-select: none; } .sd-drag.is-grab { cursor: grabbing; } .sd-drag .sd-coin { animation: none; } .sd-drag img { pointer-events: none; } .pj-seed-tip { margin-top: 3.5cqw; padding: .2em .8em; border-radius: 999px; background: rgba(255,255,255,.12); color: #e8f4ff; font-size: max(11px, 3.6cqw); font-weight: 800; white-space: nowrap; transition: opacity .4s; } .pj-seed.is-used .pj-seed-tip { opacity: 0; } /* 貯まる演出：葉っぱが上からコインへ舞い込む */ .sd-drop { position: absolute; left: 50%; top: -2.6cqw; width: .9cqw; height: .9cqw; margin-left: -.45cqw; border-radius: 0 100% 0 100%; background: linear-gradient(135deg, #d6ff9c, #3fbf5a); opacity: 0; } [data-pt="1"] .sd-drop { animation: sdFall 1.6s ease-in infinite; } [data-pt="1"] .sd-drop:nth-of-type(2) { animation-delay: .5s; left: 32%; } [data-pt="1"] .sd-drop:nth-of-type(3) { animation-delay: 1s; left: 68%; } @keyframes sdFall { 0% { opacity: 0; transform: translateY(0) rotate(0); } 20% { opacity: 1; } 100% { opacity: 0; transform: translateY(4cqw) rotate(220deg) scale(.6); } } /* 3つにつながる時：コインがクルッと速く1回転してから元のペースに戻る */ [data-pt="2"] .sd-stage { animation: sdHop .9s cubic-bezier(.3,1.6,.5,1); } @keyframes sdHop { 0% { transform: none; } 40% { transform: translateY(-8%) scale(1.08); } 100% { transform: none; } } .pt-dest { margin: 0; padding: 0; list-style: none; display: grid; grid-template-columns: repeat(3, 1fr); gap: 1cqw; width: 100%; } .pt-dest li { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .4em; text-align: center; padding: .7em .4em; border-radius: .8em; background: rgba(242,177,52,.14); border: 1px solid rgba(242,177,52,.6); font-size: max(14px, 1.3cqw); font-weight: 900; color: var(--gold); line-height: 1.25; transition: opacity .5s, transform .6s cubic-bezier(.2,1.4,.4,1); } .pt-dest li em { display: grid; place-items: center; width: 1.8em; height: 1.8em; border-radius: 50%; background: var(--gold); color: #5a3a00; font-style: normal; font-family: var(--f-num); font-weight: 800; } .pt-dest li small { display: block; font-size: .75em; font-weight: 700; opacity: .9; } .pt-dest li img { height: 3.4em; width: auto; border-radius: .25em; box-shadow: 0 3px 8px rgba(0,0,0,.5); transform: rotate(-4deg); } .pt-arr2, .pt-dest li { opacity: .12; } .pt-dest li { transform: translateY(.8em); } [data-pt="2"] .pt-arr2, [data-pt="2"] .pt-dest li { opacity: 1; } [data-pt="2"] .pt-dest li { transform: none; animation: destPop .6s cubic-bezier(.2,1.6,.4,1) backwards; } [data-pt="2"] .pt-dest li:nth-child(2) { animation-delay: .35s; } [data-pt="2"] .pt-dest li:nth-child(3) { animation-delay: .7s; } @keyframes destPop { 0% { opacity: 0; transform: translateY(1em) scale(.85); } 100% { opacity: 1; transform: none; } } .fc-point figcaption { padding-left: .9em; justify-content: center; background: rgba(255,255,255,.06); } .rm .sd-coin { animation: none; transform: rotateX(-10deg) rotateY(-18deg); } .rm .sd-stage, .rm .sd-stage::before, .rm .sd-face::after, .rm .sd-shadow, .rm [data-pt] .sd-drop { animation: none; } /* 「続く輪」：楽しむ と アースクルー をつなぐ光の線 */ .vm-link { position: absolute; left: 50%; top: 67%; width: .7cqw; height: 11%; margin-left: -.35cqw; border-radius: 99px; background: linear-gradient(180deg, var(--gold), var(--sea)); box-shadow: 0 0 2cqw var(--gold); opacity: 0; transform: scaleY(0); transform-origin: 50% 100%; transition: opacity .4s, transform .7s cubic-bezier(.3,.8,.3,1); z-index: 2; } .vm-link i { position: absolute; left: 50%; width: 1.4cqw; height: 1.4cqw; margin-left: -.7cqw; border-radius: 50%; background: #fff; box-shadow: 0 0 1cqw #fff; opacity: 0; } .vmap.link-play .vm-link { opacity: 1; transform: none; } .vmap.link-play .vm-link i { animation: linkUp 1.4s linear infinite; } .vmap.link-play .vm-link i:nth-child(2) { animation-delay: .47s; } .vmap.link-play .vm-link i:nth-child(3) { animation-delay: .94s; } @keyframes linkUp { 0% { top: 100%; opacity: 0; } 15% { opacity: 1; } 100% { top: -10%; opacity: 0; } } .vmap.link-play .vm-crew { box-shadow: 0 0 0 1.2cqw rgba(120,217,179,.2), 0 0 8cqw rgba(120,217,179,.5); } .vmap.link-play .vm-crew-lbl::after { content: "続く輪"; display: block; font-size: max(14px, 2.2cqw); font-weight: 900; color: var(--sea); } @media (max-width: 640px) { .pt-flow { padding: 12px 10px 10px; gap: 6px; } .pt-src { grid-template-columns: 1fr; gap: 4px; } .pt-src li { font-size: 14px; padding: 2px 8px 2px 2px; } .pt-src .face { width: 20px; height: 20px; } .pt-arr { width: 12px; height: 14px; } .pt-coin { --cw: 72px; gap: 2px; } .sd-name { font-size: 14px; margin-top: 8px; } .sd-drop { width: 7px; height: 7px; margin-left: -3.5px; top: -18px; } .pt-dest { gap: 6px; } .pt-dest li { font-size: 14px; padding: 6px 3px; } } /* 願い → 合言葉 の入れ替え（同じ場所に重ねる） */ .swap { display: grid; } .swap > * { grid-area: 1 / 1; } .sl .swap-a.show:not(.now) { opacity: 0; translate: 0 -10px; } /* 締め：全員で「子どもたちの未来に、もっと美しい地球を！」 */ .end-chant { font-size: calc(var(--fs-hx) * .95); font-weight: 900; line-height: 1.3; text-align: center; text-shadow: 0 4px 30px rgba(4,15,29,.9); } .end-chant em { color: var(--gold); } .end-chant small { display: block; width: max-content; margin: 0 auto .4em; padding: .2em 1em; border-radius: 999px; background: var(--gold); color: var(--ink); font-size: max(14px, .4em); } .sl[data-rv="2"] .end-pre { display: none; } .sl:not([data-rv="2"]) .end-chant { display: none; } .mk-motto { font-size: var(--fs-s); font-weight: 900; color: #fff; margin-bottom: .6em !important; } /* ページ上部の合言葉 */ .v-motto { display: inline-block; margin: 0 0 12px; padding: .3em 1em; border-radius: 999px; border: 1px solid rgba(242,177,52,.6); background: rgba(242,177,52,.1); color: #ffe3a3; font-family: var(--f-head); font-weight: 900; font-size: clamp(.9rem, 1.6vw, 1.05rem); } @media (max-width: 640px) { .end-chant { font-size: 22px; } } /* ========================================================================== 14. 地図の真ん中「アースクルー」＝案内役7体が手をつないで地球を囲む仲間の輪（2026-10-02 v5） ・位置・大きさ・前後は vision.js の crewOrbit が毎フレーム決める（.orb-ch の transform・z-index） ・.orb-back（奥）は地球の円を切り抜いてあるので、奥に回ったキャラと帯は地球に隠れる ・循環の輪は、PCは横長の楕円（左右の領域を外へ）、スマホは円 ========================================================================== */ .vm-geo--m { display: none; } .vm-ring { fill: none; } .vm-runner { animation: none; fill: #fff; filter: drop-shadow(0 0 8px #fff); } .vm-crew-ring, .vm-dots { display: none; } .vm-crew { left: 0; top: 0; width: 100%; height: 100%; aspect-ratio: auto; transform: none; border-radius: 0; box-shadow: none !important; pointer-events: none; } .orb-layer { position: absolute; inset: 0; } .orb-band { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; } .orb-band path { fill: none; stroke-linecap: round; transition: stroke-width .6s, opacity .6s, stroke .6s; } .ob-line { stroke: url(#ob-grad); stroke-width: 3; opacity: .85; } .ob-glow { stroke: #f2b134; stroke-width: 12; opacity: .14; } .orb-back .ob-line { stroke-width: 2; opacity: .5; } .orb-back .ob-glow { opacity: .07; } .ob-link { stroke: #78d9b3; stroke-width: 4; stroke-dasharray: 2 14; opacity: 0; filter: drop-shadow(0 0 6px #78d9b3); } .orb-ch { position: absolute; left: 0; top: 0; transform-origin: 50% 64%; will-change: transform; transition: opacity .45s; } .orb-ch .chara { --cs: 100%; width: 100%; } .sl .orb-ch .chara, .sc.on .orb-ch .chara { animation: none; } .orb-ch .chara::before { display: none; } .orb-ch .chara-sp { filter: drop-shadow(0 .6cqw .8cqw rgba(0,0,0,.45)); } .orb-spark { position: absolute; left: 0; top: 0; width: 1.3cqw; height: 1.3cqw; border-radius: 50%; background: #fff; box-shadow: 0 0 .9cqw .3cqw rgba(242,177,52,.85); opacity: 0; transition: opacity .35s; } .orb-spark.c1 { box-shadow: 0 0 .9cqw .3cqw rgba(120,217,179,.9); } .orb-spark.c2 { box-shadow: 0 0 .9cqw .3cqw rgba(255,140,102,.85); } .orb-spark.c3 { box-shadow: 0 0 .9cqw .3cqw rgba(24,174,202,.9); } .orb-spark.on { opacity: 1; animation: sparkOn .5s cubic-bezier(.2,1.6,.4,1); } @keyframes sparkOn { from { width: 0; height: 0; } } /* ラベル：地球の真下に1つ（位置は JS） */ .vm-crew-lbl { top: 0; z-index: 2000; transform: translateX(-50%); padding: .2em 1.1em .25em; } .vm-crew-lbl small { font-size: max(14px, 1.8cqw); } .vm-crew-lbl b { font-size: max(15px, 3cqw); } .vm-crew-lbl .lb-b { display: none; } .vmap.link-play .vm-crew-lbl .lb-a { display: none; } .vmap.link-play .vm-crew-lbl .lb-b { display: inline; color: var(--sea); } .vmap.link-play .vm-crew-lbl::after { content: none; } .vmap.link-play .vm-crew-lbl { border-color: var(--sea); } /* hub＝crew：輪が金色に光る（全員が手を振るのは JS） */ .vm-crew.lit .ob-line { stroke: #ffd77a; stroke-width: 5; opacity: 1; } .vm-crew.lit .ob-glow { stroke-width: 22; opacity: .35; } .vm-crew.lit .orb-back .ob-line { stroke-width: 3; opacity: .7; } /* hub＝grow：帯の上に光の粒が灯り、輪が明るく太く */ .vmap.grow .ob-line { stroke-width: 7; opacity: 1; } .vmap.grow .ob-glow { stroke-width: 30; opacity: .45; } /* 「続く輪」：楽しむ と 輪をつなぐ光の線（流れる） */ .vmap.link-play .ob-link { opacity: 1; animation: obLink 1s linear infinite; } @keyframes obLink { to { stroke-dashoffset: -16; } } .vmap.link-play .ob-line { stroke: #9ff0cf; stroke-width: 5; opacity: 1; } .vmap.link-play .ob-glow { stroke: #78d9b3; stroke-width: 20; opacity: .3; } .rm .ob-link, .rm .orb-spark { animation: none !important; } /* 個別サービスの話のときは、輪は薄く（ゆっくり回すのは JS） */ .vmap.focus .vm-crew:not(.lit) { opacity: .55; } /* 地図の上の札：全体を見せるせりふと、課題を紹介するせりふのときだけ */ .vmap.walls-off .vm-wall { opacity: 0 !important; } /* 領域：左右（知る・動く）は楕円の両端へ */ @media (min-width: 641px) { .r-know { left: 113%; right: auto; transform: translate(-50%, -50%); } .r-act { left: -13%; transform: translate(-50%, -50%); } .vmap.focus .r-know.lit, .vmap.focus .r-act.lit { transform: translate(-50%, -50%) scale(1.06); } .a-ne { left: 99%; top: 17%; } .a-se { left: 100%; top: 84%; } .a-sw { left: 0; top: 84%; } .a-nw { left: 0; top: 15%; } } @media (max-width: 640px) { .vm-geo--pc { display: none; } .vm-geo--m { display: inline; } .vm-crew-lbl { padding: 1px 10px 2px; } .vm-crew-lbl b { font-size: 15px; } .orb-spark { width: 2cqw; height: 2cqw; } } /* v5：地図の地球を少し大きく（アースクルーの輪が主役に見えるように） */ @media (min-width: 641px) { .stage[data-scene="v-map"] .globe-pos { transform: translate(500px, 290px) scale(.56); } } /* 課題を紹介するせりふ：まだ出ていない札は出さない（出た札だけ薄く） */ .vmap.w-intro .vm-wall:not(.is-cur):not([data-st="show"]):not([data-st="solved"]) { opacity: 0; } /* 光の帯（ふだん）を少し見えやすく */ .ob-line { stroke-width: 4; } .ob-glow { opacity: .2; } .ob-link { stroke-width: 5; stroke-dasharray: 3 11; } /* シードの焦点カード：真ん中に大きく（PC） */ @media (min-width: 641px) { .vm-focus.fc-c { left: 50%; right: auto; width: 60cqw; margin-left: -30cqw; top: 7cqw; } .fc-c .fc-issue { font-size: max(14px, 1.9cqw); } .fc-c .pt-flow { gap: .9cqw; padding: 2.2cqw 2cqw 1.8cqw; } .fc-c .pt-src { gap: .8cqw; } .fc-c .pt-src li { font-size: 1.5cqw; padding: .3em .8em .3em .3em; } .fc-c .pt-arr { width: 2cqw; height: 2.6cqw; } .fc-c .pt-coin { --cw: 13cqw; } .fc-c .sd-name { font-size: 1.9cqw; margin-top: 1.4cqw; } .fc-c .sd-drop { width: 1.2cqw; height: 1.2cqw; margin-left: -.6cqw; top: -4cqw; } .fc-c .pt-dest { gap: 1.2cqw; } .fc-c .pt-dest li { font-size: 1.6cqw; padding: .7em .5em; word-break: keep-all; } .fc-c.vm-focus figcaption { font-size: 1.7cqw; padding: .7em 1em; } } /* 焦点カードの帯：解決前は「✓ 解決」の場所を取らない（スマホで課題の文字が折り返さないように） */ .fc-issue:not(.is-solved) .fc-ok { display: none; } /* スマホ：地図の下の空いた帯に、課題の札を横一列に（地図の上の領域に札がかぶらないように） */ @media (max-width: 640px) { .vm-wall[data-w="w1"] { --x: 17% !important; --y: 114% !important; } .vm-wall[data-w="w2"] { --x: 50% !important; --y: 114% !important; } .vm-wall[data-w="w3"] { --x: 83% !important; --y: 114% !important; } .vm-wl { max-width: 31cqw; } .vmap.w-intro .vm-wall.is-cur { transform: translate(-50%, -50%) scale(1.12); } } @media (max-width: 640px) { .fc-issue { font-size: 14px; gap: 6px; padding: 6px 8px; } .fc-tt { white-space: nowrap; } .fc-ok { padding: .1em .5em; } } /* スマホ：光の帯は細く */ @media (max-width: 640px) { .ob-line { stroke-width: 2.5; } .ob-glow { stroke-width: 7; } .orb-back .ob-line { stroke-width: 1.5; } .vm-crew.lit .ob-line { stroke-width: 3; } .vm-crew.lit .ob-glow { stroke-width: 10; } .vmap.grow .ob-line { stroke-width: 4; } .vmap.grow .ob-glow { stroke-width: 14; } .vmap.link-play .ob-line { stroke-width: 3; } .vmap.link-play .ob-glow { stroke-width: 10; } .ob-link { stroke-width: 3; } } /* 動きを減らす設定：ページ上の別の部品 .rm .grow（幅の伸びるバー）が地図の .grow に当たらないように */ .rm .vmap.grow { width: 58cqw !important; } @media (max-width: 640px) { .rm .vmap.grow { width: 100cqw !important; } } .rm .swap-b:not(.show), .rm .sl .swap-a.show:not(.now) { visibility: hidden; } /* 07 少人数で回る仕組み：助成への感謝の札（2026-10-02 ユーザー指定） */ .ai-grant { display: inline-block; margin: .2em 0 .6em; padding: .35em .9em; border-radius: 999px; background: rgba(242,177,52,.16); border: 1.5px solid rgba(242,177,52,.7); color: #ffe3a3; font-weight: 800; font-size: max(14px, 1.35cqw); } /* ---------- 初見でも「動画を選んで再生」が分かる上部（2026-10-02） ---------- */ .v-hero { padding-top: 84px; } .v-h1--compact { font-size: clamp(1.6rem, 3.6vw, 2.6rem); line-height: 1.3; } .v-h1--compact em::after { display: none; } .v-howto { margin: 12px 0 18px; color: #dbeaf3; font-size: clamp(.98rem, 1.6vw, 1.12rem); } .v-howto b { color: var(--gold); } .v-howto-n { display: inline-block; background: var(--gold); color: var(--ink); font-weight: 900; padding: 1px 10px; border-radius: 999px; margin-right: 4px; } .ed-tab--video { display: flex; align-items: center; gap: 12px; position: relative; cursor: pointer; } .ed-tab--video .ed-ico { flex: none; width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center; background: rgba(255,255,255,.12); } .ed-tab--video .ed-ico svg { width: 18px; height: 18px; fill: #fff; margin-left: 2px; } .ed-tab--video[aria-selected="true"] .ed-ico { background: var(--gold); } .ed-tab--video[aria-selected="true"] .ed-ico svg { fill: var(--ink); } .ed-tab--video .ed-body { min-width: 0; } .ed-tab--video .ed-no { display: block; font-size: .74rem; font-weight: 900; letter-spacing: .08em; color: var(--sea); } .ed-tab--video .ed-now { position: absolute; top: -10px; right: 12px; background: var(--gold); color: var(--ink); font-size: .7rem; font-weight: 900; padding: 1px 8px; border-radius: 999px; display: none; } .ed-tab--video[aria-selected="true"] .ed-now { display: block; } .ed-tabs--two { margin-top: 6px; } .v-hero-lead--after { margin: 22px 0 10px; } .v-hero-lead--after + .v-hero-now { margin: 0 0 6px; } @media (max-width: 640px) { .v-hero { padding-top: 72px; } .v-howto { margin-bottom: 14px; } .ed-tab--video { gap: 8px; } .ed-tab--video .ed-ico { width: 30px; height: 30px; } .ed-tab--video .ed-ico svg { width: 14px; height: 14px; } .ed-tab--video .ed-now { font-size: .68rem; right: 8px; } } /* PCでは開いた画面の中に再生ボタンが入るよう、少し上に置く（1280×720でも見える） */ @media (min-width: 901px) { .stage-view.is-idle .big-play { top: 32%; } } /* スマホ：動画のタブがはみ出さないよう、副題を省いて折り返す */ .ed-tabs--two { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } @media (max-width: 640px) { .ed-tab--video { padding: 10px 8px; } .ed-tab--video small { display: none; } .ed-tab--video b, .ed-tab--video .ed-no { white-space: normal; } .ed-tabs--two .ed-tab--video b { font-size: .9rem; display: block; } .ed-tabs--two .ed-tab--video .ed-dur { display: block; } } @media (max-width: 640px) { .ed-tabs--two .ed-tab--video b { font-size: .84rem; word-break: normal; overflow-wrap: anywhere; letter-spacing: 0; } .ed-tab--video .ed-ico { width: 26px; height: 26px; } } /* スマホは丸い▶を「動画1」の横の小さな▶に置き換えて、題名を1行で収める */ @media (max-width: 640px) { .ed-tab--video .ed-ico { display: none; } .ed-tab--video .ed-no::before { content: "▶"; display: inline-grid; place-items: center; width: 18px; height: 18px; margin-right: 5px; border-radius: 50%; background: rgba(255,255,255,.14); color: #fff; font-size: 9px; vertical-align: 1px; } .ed-tab--video[aria-selected="true"] .ed-no::before { background: var(--gold); color: var(--ink); } .ed-tabs--two .ed-tab--video b { font-size: .9rem; } .ed-tab--video { padding: 12px 10px 10px; } } /* v-ratio（旧v-tenと統合）：左にハイサイクリーン隊の10トン→海の1,000万トンを縦に並べ、右の面に「ほかの活動」の点と名前を足す */ .sl--ratio .sl-txt { gap: 2.6cqw; width: 46cqw; } .sl--ratio .sl-blk .sl-k { margin-bottom: .4em !important; } .sl--ratio .sl-blk .sl-num { margin-top: 0 !important; font-size: calc(var(--fs-h) * .62); } .sl--ratio .sl-blk .sl-num b { font-size: calc(var(--fs-n) * .62); } .ratio-dot2 { position: absolute; width: 5px; height: 5px; margin: -2.5px 0 0 -2.5px; border-radius: 50%; background: #fff; box-shadow: 0 0 6px 2px #78d9b3, 0 0 14px 4px rgba(120,217,179,.4); } .ratio-more { position: absolute; inset: 0; pointer-events: none; } .ratio-more ul { position: absolute; left: 3cqw; bottom: 8cqw; list-style: none; margin: 0; padding: 0; font-size: var(--fs-s); font-weight: 700; line-height: 1.7; color: #e6f2f8; } .ratio-more li::before { content: "●"; color: #78d9b3; margin-right: .5em; font-size: .7em; vertical-align: .1em; } .ratio-more > p { position: absolute; left: 3cqw; bottom: 4.6cqw; font-size: var(--fs-s); font-weight: 900; } /* v-ratio のスマホ用（上の基本ルールより後ろに置いて上書きする） */ @media (max-width: 640px) { .sl--ratio .sl-txt { width: auto; } .ratio-more { position: static; margin-top: 10px; } .ratio-more ul, .ratio-more > p { position: static; font-size: 14px; } .ratio-more > p { margin-top: .4em; } .ratio-dot2 { display: none; } } /* 課題の「解決」の締め：札を地図の真ん中へ → 赤のまま理由を話す → 「だから」の瞬間にチェックが描かれて緑に（2026-10-04 ユーザー指定） 緑になる時刻は固定秒ではなく、音声の語の位置（台本 marks の conclude）に vision.js が合わせて .ok を付ける（音とずれない） */ .vm-wall { transition: opacity .35s, transform .6s cubic-bezier(.2,1.2,.4,1), left .6s ease, top .6s ease; } .vm-chk { position: absolute; left: 0; top: 0; width: 5.2cqw; height: 5.2cqw; min-width: 44px; min-height: 44px; transform: translate(-45%, -45%) scale(.3); opacity: 0; pointer-events: none; filter: drop-shadow(0 4px 10px rgba(0,0,0,.45)); transition: transform .35s cubic-bezier(.2,1.8,.4,1), opacity .15s; } .vm-chk circle { fill: #1f8a62; stroke: #fff; stroke-width: 3; } .vm-chk path { fill: none; stroke: #fff; stroke-width: 6; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 44; stroke-dashoffset: 44; transition: stroke-dashoffset .3s ease; } .vm-wall[data-st="solved"] .vm-chk, .vm-wall.ok .vm-chk { opacity: 1; transform: translate(-45%, -45%) scale(1); } .vm-wall[data-st="solved"] .vm-chk path, .vm-wall.ok .vm-chk path { stroke-dashoffset: 0; transition-delay: .12s; } .vm-wall.final { left: 50% !important; top: 50% !important; z-index: 8; opacity: 1 !important; } .vmap.w-final .vm-wall:not(.final) { opacity: 0 !important; } .vmap.w-final .vm-region, .vmap.w-final .vm-crew { opacity: .2 !important; } .vmap.w-final .vm-wall.final { transform: translate(-50%, -50%) scale(1.8); } .vmap.w-final .vm-wall.final .vm-wl { font-size: max(15px, 2.4cqw); box-shadow: 0 0 0 1cqw rgba(224,99,77,.25), 0 16px 40px rgba(0,0,0,.55); background: #b8322a; transition: background .3s, box-shadow .3s; } .vmap.w-final .vm-wall.final.ok .vm-wl { background: #1f8a62; box-shadow: 0 0 0 1cqw rgba(120,217,179,.3), 0 16px 40px rgba(0,0,0,.55); } .vmap.w-final .vm-wall.final .vm-ok { display: none; } @media (max-width: 640px) { .vmap.w-final .vm-wall.final { transform: translate(-50%, -50%) scale(1.25); } } .rm .vm-wall, .rm .vm-chk, .rm .vm-chk path, .rm .vm-wall .vm-wl { transition: none !important; animation: none !important; } /* テロップは出さない（2026-10-04 ユーザー指定「テロップはいらない。アニメーションの中で表現する」）。字幕（ステージ下の全文）はそのまま残す */ .telop, .telop-m { display: none !important; } /* ========================================================================== テロップなしで説明する（2026-10-04）：サービスの見せ場／課題の理由の図解／比較の四角のラベル ========================================================================== */ /* ---- ① サービス紹介カードの見せ場（スクショの上に、カードが出たあとポンと出る） ---- */ .fr-shot .fx { position: absolute; left: 3%; right: 3%; bottom: 5%; font-family: "M PLUS 1p", "Noto Sans JP", var(--f-body); font-weight: 900; color: #fff; opacity: 0; transform: translateY(14%) scale(.9); transform-origin: 50% 100%; animation: fxIn .5s .35s cubic-bezier(.2,1.5,.4,1) both; } @keyframes fxIn { to { opacity: 1; transform: none; } } .fx small { display: block; font-size: .8em; opacity: .9; } .fx-num { display: inline-block; padding: .5em 1em .55em; border-radius: 1cqw; background: rgba(6,26,44,.9); border: 2px solid var(--gold); box-shadow: 0 8px 24px rgba(0,0,0,.5); font-size: max(14px, 1.5cqw); line-height: 1.25; } .fx-num b { display: block; font-size: 3.4em; line-height: 1; color: #ffe14a; letter-spacing: .02em; } .fx-num b em { font-style: normal; font-size: .5em; margin-left: .1em; } .fx-num span { display: block; margin-top: .15em; } .fx-chat { display: grid; gap: .5em; font-size: max(13px, 1.25cqw); font-weight: 800; } .fx-chat p { margin: 0; padding: .5em .9em; border-radius: 1em; max-width: 78%; line-height: 1.4; box-shadow: 0 6px 18px rgba(0,0,0,.4); } .fx-chat .q { justify-self: end; background: #2f7fd0; border-bottom-right-radius: .2em; animation: fxIn .4s .35s both; } .fx-chat .a { background: rgba(6,26,44,.94); border: 2px solid #78d9b3; border-bottom-left-radius: .2em; opacity: 0; animation: fxIn .4s 1.1s cubic-bezier(.2,1.5,.4,1) both; } .fx-chat .src { display: inline-block; margin-top: .35em; padding: .1em .7em; border-radius: 999px; background: #1f8a62; font-size: .85em; } .fr-shot .fx.fx-chat { animation: none; opacity: 1; transform: none; } .fx-pin { inset: 0 !important; } .fx-pin .fx-num { position: absolute; left: 0; bottom: 0; } .fx-pin .pin { position: absolute; width: 1.6cqw; height: 1.6cqw; border-radius: 50% 50% 50% 0; rotate: -45deg; background: #ff6b4a; border: .25cqw solid #fff; box-shadow: 0 3px 8px rgba(0,0,0,.5); opacity: 0; animation: pinDrop .45s cubic-bezier(.2,1.8,.4,1) both; } .fx-pin .p1 { left: 62%; top: 22%; animation-delay: .5s; } .fx-pin .p2 { left: 80%; top: 44%; animation-delay: .7s; } .fx-pin .p3 { left: 48%; top: 52%; animation-delay: .9s; } .fx-pin .p4 { left: 72%; top: 14%; animation-delay: 1.1s; } @keyframes pinDrop { 0% { opacity: 0; translate: 0 -150%; } 100% { opacity: 1; translate: 0 0; } } .fx-flow { display: flex; align-items: center; justify-content: center; gap: .6em; padding: .6em .8em; border-radius: 1cqw; background: rgba(6,26,44,.92); border: 2px solid var(--gold); box-shadow: 0 8px 24px rgba(0,0,0,.5); font-size: max(13px, 1.3cqw); line-height: 1.25; text-align: center; } .fx-flow span { padding: .4em .7em; border-radius: .6em; background: rgba(255,255,255,.14); } .fx-flow i { font-style: normal; color: var(--gold); font-size: 1.5em; } .fx-flow b { padding: .4em .8em; border-radius: .6em; background: #1f8a62; font-size: 1.1em; } .fx-quiz { display: grid; gap: .4em; justify-items: start; } .fx-quiz .qq { margin: 0; padding: .45em .9em; border-radius: .8em; background: rgba(6,26,44,.94); border: 2px solid #78d9b3; font-size: max(13px, 1.3cqw); } .fx-quiz .pt { margin: 0; padding: .15em .7em; border-radius: 999px; background: linear-gradient(180deg, #ffe14a, #f2b134); color: #3a2400; font-size: max(18px, 2.6cqw); box-shadow: 0 6px 18px rgba(0,0,0,.45); opacity: 0; animation: fxIn .45s 1.1s cubic-bezier(.2,1.8,.4,1) both; } .fx-quiz .pt small { display: inline; font-size: .45em; margin-left: .3em; } .fx-quiz span { padding: .1em .8em; border-radius: 999px; background: #1f8a62; font-size: max(13px, 1.3cqw); } .fx-medal { display: flex; align-items: center; gap: .6em; width: max-content; padding: .4em 1.1em .5em .7em; border-radius: 1.2cqw; background: rgba(6,26,44,.92); border: 2px solid var(--gold); box-shadow: 0 8px 24px rgba(0,0,0,.5); font-size: max(14px, 1.5cqw); line-height: 1.2; } .fx-medal .md { font-style: normal; font-size: 3.2em; line-height: 1; animation: medalSpin .8s .5s cubic-bezier(.2,1.4,.4,1) both; } .fx-medal b { display: block; font-size: 2.4em; color: #ffe14a; } @keyframes medalSpin { 0% { transform: rotateY(90deg) scale(.4); } 100% { transform: none; } } .rm .fr-shot .fx, .rm .fx-pin .pin, .rm .fx-chat .a, .rm .fx-quiz .pt, .rm .fx-medal .md { animation: none !important; opacity: 1 !important; transform: none !important; translate: none !important; } @media (max-width: 640px) { .fx-num b { font-size: 2.6em; } .fx-chat { font-size: 12px; } .fx-flow { font-size: 11px; } } /* ---- ② 課題の理由の図解：真ん中の札の下に、ステップが音声に合わせて順に出る ---- */ .vm-reason { position: absolute; left: 50%; top: 86%; z-index: 9; display: none; align-items: center; gap: 1.4cqw; width: max-content; max-width: 188cqw; transform: translateX(-50%); } .vmap.w-final .vm-reason.on { display: flex; } .vm-reason .rsn { word-break: auto-phrase; text-wrap: balance; margin: 0; padding: .5em .8em; min-width: 20cqw; border-radius: 2cqw; background: rgba(6,26,44,.94); border: 2px solid rgba(255,255,255,.35); color: #fff; font-family: "M PLUS 1p", "Noto Sans JP", var(--f-body); font-weight: 900; font-size: max(15px, 2.9cqw); line-height: 1.3; text-align: center; box-shadow: 0 10px 26px rgba(0,0,0,.5); opacity: 0; transform: translateY(30%) scale(.85); transition: opacity .3s, transform .45s cubic-bezier(.2,1.6,.4,1); } .vm-reason .rsn em { display: block; width: 1.6em; height: 1.6em; margin: 0 auto .3em; border-radius: 50%; background: var(--gold); color: #3a2400; font-style: normal; line-height: 1.6; font-size: .9em; } .vm-reason .rsn-goal { background: #1f8a62; border-color: #bff1dc; font-size: max(15px, 3.3cqw); } .vm-reason .rsn-arr { font-style: normal; font-size: max(18px, 3.6cqw); color: var(--gold); opacity: 0; transition: opacity .3s; font-weight: 900; } .vm-reason[data-step="1"] .rsn[data-n="1"], .vm-reason[data-step="2"] .rsn[data-n="1"], .vm-reason[data-step="2"] .rsn[data-n="2"], .vm-reason[data-step="3"] .rsn[data-n="1"], .vm-reason[data-step="3"] .rsn[data-n="2"], .vm-reason[data-step="3"] .rsn[data-n="3"], .vm-reason[data-step="4"] .rsn { opacity: 1; transform: none; } .vm-reason[data-step="2"] .rsn-arr:nth-of-type(1), .vm-reason[data-step="3"] .rsn-arr:nth-of-type(-n+2), .vm-reason[data-step="4"] .rsn-arr { opacity: 1; } .vm-reason[data-step="4"] .rsn[data-n="1"], .vm-reason[data-step="4"] .rsn[data-n="2"], .vm-reason[data-step="4"] .rsn[data-n="3"] { opacity: .75; } @media (max-width: 640px) { .vm-reason { flex-direction: column; top: 66%; gap: 4px; } .vm-reason .rsn { min-width: 0; padding: .35em .9em; font-size: 14px; } .vm-reason .rsn em { display: inline-block; margin: 0 .4em 0 0; } .vm-reason .rsn-arr { transform: rotate(90deg); font-size: 16px; line-height: 1; } } .rm .vm-reason .rsn, .rm .vm-reason .rsn-arr { transition: none; } /* 解決の締め（w-final）：札と理由を1つのまとまりとして見せる。後ろの地図と地球は、周りほど暗く沈める */ .vmap.w-final::before { content: ""; position: absolute; inset: -12%; z-index: 7; pointer-events: none; background: radial-gradient(ellipse 58% 52% at 50% 46%, rgba(4,15,29,.62), rgba(4,15,29,.9) 72%); animation: wfDim .45s ease both; } @keyframes wfDim { from { opacity: 0; } to { opacity: 1; } } @media (min-width: 641px) { .vmap.w-final .vm-wall.final { top: 33% !important; } /* 札は少し上に上げ、すぐ下に理由を並べる */ .vm-reason { top: 55%; gap: 1cqw; align-items: stretch; } .vm-reason .rsn { display: flex; flex-direction: column; justify-content: center; min-width: 15cqw; max-width: 24cqw; font-size: 2.4cqw; padding: .5em .8em; } /* 4つ並んでも地図の幅に収まる大きさ。高さはそろえる */ .vm-reason .rsn-arr { align-self: center; } .vm-reason .rsn-goal { font-size: 2.8cqw; } .vm-reason .rsn-arr { font-size: 3cqw; } } .rm .vmap.w-final::before { animation: none; } @media (max-width: 640px) { .vmap.w-final .vm-wall.final { top: 27% !important; } /* スマホは縦に並ぶので、札を上げて理由の4つ目まで収める */ .vm-reason { top: 45%; } } /* ---- ③ 比較の四角：「この四角ぜんぶ＝1,000万トン」のラベル ---- */ .ratio-cap { position: absolute; left: 50%; top: 4%; transform: translateX(-50%); width: max-content; max-width: 94%; padding: .3em .9em; border-radius: 999px; background: rgba(6,26,44,.88); border: 1.5px solid rgba(159,195,216,.7); font-size: max(13px, 1.5cqw); font-weight: 800; text-align: center; opacity: 0; transition: opacity .6s 2.4s; } .ratio-cap b { color: var(--hl); } .sl .ratio-field.show .ratio-cap { opacity: 1; } @media (max-width: 640px) { .ratio-cap { font-size: 12px; } } /* 見せ場は右寄せ（左下に話すキャラが立つため、かぶらないように）。吹き出し・流れ図は幅を広く */ .fr-shot .fx { left: auto; right: 3%; max-width: 92%; } .fr-shot .fx.fx-chat { left: 3%; right: 3%; max-width: none; } .fr-shot .fx.fx-pin { left: 0; right: 0; max-width: none; } .fx-pin .fx-num { left: auto; right: 3%; bottom: 5%; } .fx-chat .q, .fx-chat .a { max-width: 70%; } .fx-chat .a { justify-self: start; margin-left: 16%; } .fx-flow { flex-wrap: nowrap; white-space: nowrap; font-size: max(12px, 1.05cqw); gap: .4em; } .fx-flow span, .fx-flow b { white-space: nowrap; } .fx-quiz { justify-items: end; } .fx-flow { font-size: max(11px, .85cqw); padding: .5em .6em; gap: .3em; } .fx-flow span { padding: .35em .5em; } .fx-flow b { padding: .35em .6em; }