/* 機能ページ 視覚レイヤー v50 * * 顧客名は書かない。このファイルは書き出す機能パッケージ(portable payload)に入るので、 * 院名・院の呼称を含むと test/package-v42-catalog の中立性検査に掛かる。 * * 役割はひとつ。全画面(機能一覧トップ / 肌・プラン診断 / 質問チャット / QAテスト3画面 / * 設置カタログ)に「背景・キャラクター・画像」を同じ言い方で載せること。 * 既存の器(design.css / home.css / 各画面CSS)は書き換えず、最後に読み込んで上から足す。 * * ── 差し替えの契約 ──────────────────────────────────────────────────── * 素材の場所は下の :root だけに書く。新素材(v50)が届いたら、この一箇所の * url() を差し替えれば全画面が入れ替わる。HTML も他のCSSも触らなくてよい。 * 届くまでは既存の承認済み素材を指しているので、404 は出ない。 * * --v50-bg-hero → v50/bg-hero.webp (1920×1080 紺金の抽象背景) * --v50-bg-section → v50/bg-section-light.webp (1920×1080 明るい面用) * --v50-card-skin → v50/card-skin.webp (1200×900 フラットイラスト) * --v50-card-chat → v50/card-chat.webp * --v50-card-qa → v50/card-qa.webp * --v50-mascot-* → v50/mascot-{greet,point,tablet,think,cheer,worried}.webp ★到着済み * * 2026-09-03 21:00: 契約した 11 点すべてが届いたので :root を差し替えた。 * HTML は 1 行も触っていない。触ったのは :root の 11 行と、素材の性質が * 変わったことで不要・有害になった加工(下記 2 箇所)だけ。 * - 院名の面: 旧素材は「白い院内写真」だったので紺のグラデを .96 まで濃く掛け、 * luminosity で色を抜いていた。新素材は最初から紺+金なので、同じ加工を残すと * 金の線が紺に潰れて絵が消える。掛け方を薄くし、blend を normal に戻した。 * - 埋め込み案内の面: 旧素材は院内写真で、器物の輪郭が汚れに見えるため * 無地の壁だけを 260% で引き伸ばしていた。新素材は全面が無地の生成りなので * cover で素直に敷き、白いスクリムも薄くした。 * 差し替え素材は全ポーズを透過にすること。紺の面にも白い面にも同じ絵を置くため。 * * ── 動き ────────────────────────────────────────────────────────────── * 動かすのは opacity と transform だけ。高さと位置は最初から確定しているので * 文字は 1px も動かない(CLS 0)。prefers-reduced-motion: reduce では全て止める。 */ /* ── 素材の差し替え口 ─────────────────────────────────────────────── * url() は必ず「../」の相対で書く。sub-path 配信(/features/<顧客>/…)では * 先頭 / の絶対パスが顧客の基底から外れるため(test/feature-patient-basepath-v42)。 * その代わり、同じ行に public/assets/… の正規パスをコメントで併記する。 * config/feature-assets.json の到達性検査(scripts/verify-feature-assets.cjs)は * 消費側のテキストから public/assets/… を拾うので、これが無いと実際に使っていても * 「未参照」と判定される。url() と併記パスは必ず同じファイルを指すこと。 */ :root { /* 背景。紺+金の抽象(1920×1080)と、明るい面用の生成り(1920×1080)。 */ --v50-bg-hero: url("../images/v50/bg-hero.webp"); /* public/assets/images/v50/bg-hero.webp */ --v50-bg-section: url("../images/v50/bg-section-light.webp"); /* public/assets/images/v50/bg-section-light.webp */ /* 3機能のカード画像。紺・金・生成り・青磁の同一パレットで描いた 1200×900 の3点。 */ /* v66(2026-09-05 深夜): 3 機能の絵を「内容をそのまま描いた」統一様式のフラットイラストに差し替え (public/assets/images/v67/card-*.webp、1200×900)。変数名は v50 のまま(参照側を変えない)。 */ --v50-card-skin: url("../images/v67/card-skin.webp"); /* public/assets/images/v67/card-skin.webp */ --v50-card-chat: url("../images/v67/card-chat.webp"); /* public/assets/images/v67/card-chat.webp */ --v50-card-qa: url("../images/v67/card-qa.webp"); /* public/assets/images/v67/card-qa.webp */ /* 案内役(マスコット)のポーズ。2026-09-03 20:30 に v50 の 6 ポーズ(1024×1024 透過)が 届いたので差し替えた。差し替えたのはこの 6 行だけで、HTML も他の CSS も触っていない。 6 ポーズすべて透過なので、紺の面にも白い面にも置ける。 */ --v50-mascot-greet: url("../images/v50/mascot-greet.webp"); /* public/assets/images/v50/mascot-greet.webp */ --v50-mascot-think: url("../images/v50/mascot-think.webp"); /* public/assets/images/v50/mascot-think.webp */ --v50-mascot-point: url("../images/v50/mascot-point.webp"); /* public/assets/images/v50/mascot-point.webp */ --v50-mascot-tablet: url("../images/v50/mascot-tablet.webp"); /* public/assets/images/v50/mascot-tablet.webp */ --v50-mascot-cheer: url("../images/v50/mascot-cheer.webp"); /* public/assets/images/v50/mascot-cheer.webp */ --v50-mascot-worried: url("../images/v50/mascot-worried.webp"); /* public/assets/images/v50/mascot-worried.webp */ --v50-ease: cubic-bezier(.22, .68, .36, 1); /* 紺のスクリム。写真の明暗差を吸って、どの画面の帯も同じ濃さの紺に見せる。 薄い掛け方(0.34 から)も試したが、元の写真が白い画面(肌・チャット)では 帯がピンクや灰色に転んで画面ごとに別物に見えた。写真は質感だけ残す濃さにする。 */ /* 2026-09-03(v50素材後): 上下だけを紺で締めて、真ん中は写真を見せる。 以前は全面を .60〜.90 で塗っていたが、それだと 1440px で高さ 188px の帯に 写真の中央 35% だけが暗く写り、被写体が「灰色のにじみ」になっていた (実測: 肌の帯 header-skin.webp は照射ヘッドが判別できなくなっていた)。 色の転びは filter の彩度落としで抑えるので、veil は薄くてよい。 */ /* 2026-09-04(v52): この veil の下に敷く写真そのものを 3 点入れ替えた (肌=明るい診察室 / QA=解答用紙と鉛筆 / 埋め込み=ノートPCの手元)。 いずれも 1440px の帯で被写体が判別できることを実機で確認済み。 veil と filter の値は変えていない。差し替えの理由と実測値は docs/FEATURE_ASSETS.md「2026-09-04(v52)の差し替え」を参照。 */ --v50-scrim: linear-gradient(90deg, rgba(11, 23, 48, .34) 0%, rgba(11, 23, 48, .10) 34%, rgba(11, 23, 48, 0) 62%), linear-gradient(180deg, rgba(11, 23, 48, .46) 0%, rgba(16, 32, 63, .06) 34%, rgba(16, 32, 63, .10) 62%, rgba(11, 23, 48, .52) 100%); --v50-gold-rule: linear-gradient(90deg, #7d5d25, #c9a765 45%, #7d5d25); } /* ── 1. 見出し帯(全画面共通) ─────────────────────────────────────── 写真をそのまま敷くと、画面ごとに明るさも被写体も散らばって「別のサイト」に見える。 紺のスクリムを掛けて金の細線で締めると、写真は質感だけを残して、 どの画面も同じ紺+金の帯になる。写真の差し替えでトーンが崩れることも無くなる。 */ .page-banner { height: clamp(112px, 14vw, 188px); /* 帯の地は v50 の紺+金の面。写真は左半分に敷いてここへ溶かす。 写真を帯いっぱいに cover で敷くと、1600×600 の素材が 1440×188(7.7:1)に 引き伸ばされ、中央の 35% だけが巨大に写って何の写真か読めなくなっていた (実測: 肌=照射ヘッドの一部、QA=金のペンが金属の棒に見えていた)。 2026-09-04(v52): 素材側もこの見え方に合わせて切り直した。 1440px では画像の中央 67%(600px 高の y99〜501)が全幅で見え、 マスクは左 34% までが不透明なので、主題は画像の左寄りに置いてある。 */ background: var(--v50-bg-hero) center 84% / cover no-repeat, #0b1730; } .page-banner img { /* 左半分だけに置き、右端へ向かって紺の面へ溶かす。 見せる幅が半分になるぶん拡大率が下がり、被写体の形が読めるようになる (1440px で 634×188=3.4:1 の切り出し。素材 2.67:1 の高さを 78% 使う)。 */ width: clamp(210px, 52%, 760px); /* 溶かす区間を長く取る。短いと、明るい写真と紺の面の境目が 縦の線になって見えた(実測: 1440px の 44% 付近に境目が出た)。 */ -webkit-mask-image: linear-gradient(90deg, #000 0 34%, rgba(0, 0, 0, 0) 100%); mask-image: linear-gradient(90deg, #000 0 34%, rgba(0, 0, 0, 0) 100%); object-position: center 48%; /* 写真の色みを落とす。紺のスクリムだけだと、暖色の写真(肌・受付)は帯が 赤茶に、寒色の写真(器材)は青緑に転んで、画面ごとに帯の色が変わって見えた。 veil を薄くしたぶん、彩度は落としたまま明るさとコントラストを戻して、 被写体の形が読めるようにする。 */ filter: saturate(.48) brightness(1.02) contrast(1.04); } /* design.css の ::after は金の細線だけだった。スクリムを同じ1枚に重ねる (要素を増やさずに済み、既存HTMLを触らなくてよい)。 */ .page-banner::after { top: 0; height: auto; background: var(--v50-gold-rule) 0 100% / 100% 3px no-repeat, var(--v50-scrim); } /* 肌・プラン診断は独自のスクリムを ::before に持っていた。二重に暗くしない。 */ body[data-skin-stage] .page-banner::before { background: none; } /* 帯に立つ案内役。透過の webp を右端に置き、足元を帯の下辺(金の線)に合わせる。 */ .page-banner-mascot { position: absolute; right: clamp(12px, 5vw, 72px); bottom: 0; z-index: 1; width: clamp(76px, 11vw, 140px); aspect-ratio: 1; background: var(--v50-mascot-greet) center bottom / contain no-repeat; filter: drop-shadow(0 8px 16px rgba(11, 23, 48, .45)); pointer-events: none; /* 2026-09-15: 登場ポップ(v50-mascot-in)と無限の浮遊(v50-mascot-idle)を削除 (発注者「なぞのアニメーション…意味が分からない」)。最初から静止して表示する。 */ } .page-banner-mascot[data-mascot="think"] { background-image: var(--v50-mascot-think); } /* 設問中は帯ごと畳むので、案内役も一緒に消す(skin.css が帯を 6px にする)。 */ body[data-skin-stage="question"] .page-banner-mascot, body[data-skin-stage="review"] .page-banner-mascot { display: none; } /* ── 2. 機能一覧トップ ─────────────────────────────────────────────── */ /* 院名の紺のヒーロー面そのもの(地色・角丸0・下端の金線)は home.css が v60-surface-navy(v60-base.css)と組み合わせて作る。ここが持つのは 案内役(マスコット)の置き方だけ。指示書§8「紺の面の下辺に足を合わせ、 白地へ40px(SP24px)はみ出して立つ」姿勢に、リーダー裁定2 (機能一覧のヒーローにもマスコットを置く。design-brief の「置かない」を上書き) を適用する。--hero-x は home.css の .home-head が計算するコンテナ基準インセット。 */ .home-head-mascot { position: absolute; right: var(--hero-x, 20px); bottom: -24px; width: 150px; aspect-ratio: 1; /* 素材(1024角)は上下に31px(約3%)の透明余白があり、bottom center のままだと 足が面の下辺から3%浮く。center 103% で画像全体を3%分下げ、足を下辺に合わせる (v60-mascot と同じ実測ベースの補正、v60-base.css 参照)。 */ background: var(--v50-mascot-greet) center 103% / contain no-repeat; filter: drop-shadow(0 8px 16px rgba(11, 23, 48, .18)); /* 2026-09-15: 登場ポップ・無限浮遊を削除(発注者「なぞのアニメーション」)。 */ } @media (min-width: 640px) { .home-head-mascot { bottom: -40px; width: clamp(220px, 20vw, 320px); } } /* 吹き出しはマスコットの左上(指示書§8)。位置だけをここで決め、白地・角丸・ しっぽ・文字色は v60-bubble(v60-base.css、既にコントラスト検証済み)に任せる。 */ .home-hero-bubble { right: calc(var(--hero-x, 20px) + 104px); bottom: 118px; } @media (min-width: 640px) { .home-hero-bubble { right: calc(var(--hero-x, 32px) + 200px); bottom: 250px; } } /* 3機能のカード画像。素材(1200×900、紺・金・生成り・青磁の同一パレット)は 4:3 そのものなので、枠も 4:3 に合わせれば cover でも切り取りが起きない。 比率で高さを決めるので、画像が届く前後で紙面は動かない(CLS 0)。 */ body.home-page { --home-pad: clamp(22px, 2.4vw, 30px); } body.home-page .home-item { padding-top: 0; } .home-art { position: relative; display: block; margin: 0 calc(var(--home-pad) * -1) clamp(16px, 1.8vw, 22px); overflow: hidden; border-radius: 11px 11px 0 0; aspect-ratio: 4 / 3; /* 画像が来る前の地。素材の地色(生成り)と同じにして、読み込みの瞬間に 色が飛ばないようにする。 */ background: #f7f0e6; } .home-art::before { position: absolute; inset: 0; background: var(--v50-card-skin) center / cover no-repeat; transform: scale(1); content: ""; } .home-art[data-art="chat"]::before { background-image: var(--v50-card-chat); } .home-art[data-art="qa"]::before { background-image: var(--v50-card-qa); } /* 2026-09-15: 登場ポップ(v50-art-in)と hover の拡大 transform を削除 (発注者「なぞのアニメーション…意味が分からない」)。挿絵は静止画のまま表示する。 */ /* ── 3. 画面の中に立つ案内役 ─────────────────────────────────────── 帯だけでなく、肌・プラン診断の入口カードにも同じ登場とアイドルを与える。 掛ける先は img ではなく外側の枠。img には skin.css が :hover の transform: scale(1.02) を持っており、同じ要素へ無限アニメーションを掛けると アニメーション側が常に勝って hover が死ぬ。 質問チャットの案内役(.faq-entry-art)には掛けない。faq.css が既に faq-mascot-idle と、回答が届いたときの faq-mascot-react を持っているため。 */ /* 肌・プラン診断の入口には、skin.css が既に sk-mascot-in と sk-mascot-idle を img へ掛けている。ここで枠にもう1本の登場+アイドルを足すと、枠と絵が別々の 位相で上下して最大 6px の二重揺れになった(実測)。だから動きは足さない。 足すのは向きだけ。素材は画面の右を指すが、この絵はカードの右端にあり、 見出しと「チェックを始める」は左にある。そのままでは画面の外を指す。 transform ではなく scale を使う。無限アニメーションが transform を 占有しているので transform で書いても効かず、scale は独立して合成される (実測: transform: scaleX(-1) は matrix(1,0,0,1,0,-0.82) に負けて反映されなかった)。 */ #skin-app .sk-entry-heading .sk-visual-banner-img { scale: -1 1; } /* QAの結果画面の合否の印(案内役)。2026-09-04 夕方の納品前検査(v61)で、この画像を 置いていた面そのもの(全幅100vw・高さ400pxの紺ヒーロー)を撤去した。面は白地の カード1枚になったので、200px/120px の「立ち絵」は brief-v61 §1-2「大きな立ち絵」 §1-6「立ち絵・吹き出し・装飾背景は置かない」に該当する。合否が一目で分かる 小さな印として 48px 以下1つだけ残す(司令塔裁定: 48px 以下で1つまで)。 カードの内側の右下に収める(面の下辺をまたぐ置き方はやめる)。素材は上下に 31px(3%)の透明余白を持つので center 103% で足を下辺に合わせる。 合格=cheer(祝い)、不合格=worried(責めない・心配)、合否なし=greet(中立)の 割り当ては変えない(voice-mascot-v19 の契約)。 緊急の医療案内(faq-guidance--urgent)に案内役を置かない決まりも変えない。 */ .qa-result-hero.pass, .qa-result-hero.fail, .qa-result-hero.done { position: relative; } .qa-result-hero.pass::after, .qa-result-hero.fail::after, .qa-result-hero.done::after { position: absolute; right: 14px; bottom: 12px; width: 44px; aspect-ratio: 1; background-position: center 103%; background-repeat: no-repeat; background-size: contain; pointer-events: none; /* 2026-09-15: 登場ポップ(v50-mascot-in)を削除(発注者「なぞのアニメーション」)。 */ content: ""; } @media (min-width: 640px) { .qa-result-hero.pass::after, .qa-result-hero.fail::after, .qa-result-hero.done::after { right: 18px; bottom: 14px; width: 48px; } } .qa-result-hero.pass::after { background-image: var(--v50-mascot-cheer); } .qa-result-hero.fail::after { background-image: var(--v50-mascot-worried); } .qa-result-hero.done::after { background-image: var(--v50-mascot-greet); } /* ── 4. 動き ─────────────────────────────────────────────────────────── * 2026-09-15(発注者「なぞのアニメーション…意味が分からない」): v50-mascot-in・ * v50-mascot-idle・v50-art-in は使用箇所ゼロ(全消費先を除去済み、grep確認済み) * のため削除。マスコット・カード挿絵は静止画として表示する。 */ @media (prefers-reduced-motion: reduce) { .page-banner-mascot, .home-head-mascot, .home-art::before, .qa-result-hero.fail::after, .qa-result-hero.pass::after, .faq-entry-art { animation: none !important; transition: none !important; } .home-item:hover .home-art::before, .home-item:focus-within .home-art::before { transform: none; } } /* ── 5. 印刷 ───────────────────────────────────────────────────────── */ /* 紙では写真・キャラクター・背景を落とす。インクを使うだけで情報が無い。 */ @media print { #skin-app .sk-entry-heading .sk-visual-box, .faq-entry-art, .page-banner-mascot, .home-head-mascot, .qa-result-hero.fail::after, .qa-result-hero.pass::after, .home-art { display: none !important; } body.home-page .home-item { padding-top: clamp(22px, 2.4vw, 30px); } }