/* ========================================================================== photos.css — 写真の差し替えは、このファイルだけを直せば済む 使い方は3行です。 1. WordPress の「メディア」に写真をアップロードする 2. その写真の URL をコピーする（https://tokaiapp.com/wp-content/uploads/... ） 3. 下の該当する行の none を url("コピーしたURL") に書き換える 例）ファーストビューに写真を敷く --ph-hero: none; ↓ --ph-hero: url("https://tokaiapp.com/wp-content/uploads/2026/09/hero.jpg"); テーマに同梱した写真は url("../img/photos/ファイル名.jpg") と書きます （assets/img/photos/ に置いたもの。いまはこの方式で入っています）。 写真を外したいときは none に戻すだけです。 none のままでも崩れません（ブランド色のグラデーションが代わりに出ます）。 ・写真の「見せたい位置」がずれるときは、すぐ下の --pos- 行を直します center / top / bottom / "50% 30%" のように書けます （人物の顔が切れるときは top 寄りにすると直ります） ・院内写真・スタッフや患者さんが写る写真は、GitHub ではなく 必ず WordPress のメディアに置いてください（このリポジトリは公開です） ・どんな写真を用意すればいいかは docs/画像の入れ方.md の一覧を見てください ========================================================================== */ :root { /* --- ① ファーストビュー（トップの一番上・画面いっぱい） --------------- 横長で、人が写っていて、中央〜左に余白がある写真が向いています。 上から濃紺の膜がかかるので、多少明るい写真でも白文字は読めます。 */ --ph-hero: url("../img/photos/hero.jpg"); --pos-hero: center; /* 膜の濃さ。0〜1。写真が明るすぎて文字が読みにくいときだけ上げる */ --hero-veil: .78; /* --- ② ステートメント帯（「小さく始める」の全面写真） ----------------- トップの中ほどで画面いっぱいに出る帯です。 クリニックの受付・診察室・打ち合わせなど、横長の写真を。 */ --ph-statement: url("../img/photos/statement.jpg"); --pos-statement: 70% 30%; /* 人物を右に寄せ、文字と顔が重ならないようにする */ /* --- ③ 課題提起の3枚（こんな負担、毎日続いていませんか） -------------- 01 何度も検査説明をしている場面 / 02 受付が電話対応に追われる場面 / 03 何から手を付けるか迷っている場面。横長（4:3〜16:9）で。 */ --ph-issue-1: url("../img/photos/issue-1.jpg"); --ph-issue-2: url("../img/photos/issue-2.jpg"); --ph-issue-3: url("../img/photos/issue-3.jpg"); /* --- ④ 3つのサービスカード -------------------------------------------- */ --ph-svc-app: url("../img/photos/svc-app.jpg"); /* クリニック専用アプリ（スマホを使う場面） */ --ph-svc-dx: url("../img/photos/svc-dx.jpg"); /* 医療DX導入支援（PC・受付まわり） */ --ph-svc-douinavi: url("../img/photos/svc-douinavi.jpg"); /* ドウイナビ（説明を受ける患者さん） */ /* --- ⑤ お問い合わせ帯（全ページ共通の紺色の帯） ------------------------ */ --ph-cta: none; /* CGのロビー画像は「AC」の看板が写り込むので不採用 */ --pos-cta: center; /* --- ⑥ 代表の写真（会社概要ページ） ----------------------------------- ここだけは素材写真を使わないでください。 実在の人物を別人の写真で見せることになってしまいます。 ご自身の写真がまだ無いうちは none のままにしておいてください。 */ --ph-ceo: none; --pos-ceo: center top; /* --- ⑦ 各ページ上部の見出し帯の背景 ------------------------------------ 入れなくても成立します。入れると回遊中も単調になりません。 */ --ph-head-service: url("../img/photos/head-service.jpg"); --ph-head-douinavi: url("../img/photos/head-douinavi.jpg"); --ph-head-clinic-app: url("../img/photos/head-clinic-app.jpg"); --ph-head-medical-dx: url("../img/photos/head-medical-dx.jpg"); --ph-head-price: none; --ph-head-company: url("../img/photos/head-company.jpg"); --ph-head-contact: none; --ph-head-news: none; }