/* ========================================================================== KOWA Photo Block　展示スタイル（3.34.66） 「額」は3種類すべてを指す。 ・ミュージアムホワイト（白フチ＋控えめな影） ・ファインアートフレーム（細身のアルミ枠＋マット） ・フローティングプリント（ボード風。少し浮いて見える） このファイルは「公開画面」と「編集画面のキャンバス」の両方に読み込む。 写真の構図（photo-geometry.css）と同じ考え方で、見え方の正本を1か所に置く。 そのため .kowa-main も .editor-styles-wrapper も付けない。 ■ 並べ方は変えない 写真の並べ方（flex-wrap＋中央そろえ、枚数に応じた列数）は theme.css と editor.css が持っている仕組みをそのまま使う。ここは「額のつけ方」だけ。 ■ 額は必ずタイルの内側に作る（外へは出さない） タイルの外形（幅・高さ）を1pxも変えないために、額は次の3つで作る。 1. border … マット。写真はこの分だけ本当に内側へ収まる。 2. outline（負の offset）… タイルのいちばん外の細い線（フレームの枠）。 border の外側の数pxに重ねて描く。外へは出ない。 3. box-shadow … 外へ出るが場所を取らない「影」だけ。ごく控えめに。 外から内へ「細い濃色のフレーム → 広いマット → 写真」。 額装は「フレームが細く、マットが広い」ほど本物らしく見える。 逆にフレームが太くて角が丸いと、額ではなくカードUIに見えてしまう。 box-shadow の輪（spread）で太い枠を作ると、外へ張り出して隣の写真と くっついて見える。3.34.60 で実際にそうなったため、枠は必ず内側に作る。 ■ 写真が内側に収まる理由 タイルの写真（.wp-block-cover__image-background）は position:absolute の inset:0 で置かれている。絶対配置の子は「枠線の内側（パディングボックス）」を 基準に置かれるので、border を付けるだけで写真がその分だけ内側に収まる。 padding では写真が動かない。border ならこのファイルだけで完結する。 タイルは box-sizing:border-box ＋ aspect-ratio なので、border を付けても タイルの外形は変わらない。 図（.wp-block-image img）は絶対配置ではないが、box-sizing:border-box の もとでは幅・高さ・最大幅がすべて「枠線まで」を指すので、やはり外形は変わらず 絵の部分だけが内側に収まる。縦横比もくずれない。 ■ outline は「いちばん外の帯」しか作れない（実測で確認） outline-offset は枠線の外側の辺（ボーダーボックス）から測る。 offset を -(線の太さ) にすると、線はタイルのいちばん外側にぴったり重なる。 ただし offset をそれより深くする（例：幅28pxで offset -35px）と、 outline はまったく描かれなくなる。ブラウザで実測して確認した。 そのため「外＝outline／内＝border」の順にしかできない。 アルミの枠を外側に置くなら、枠が outline、マットが border になる。 outline は単色しか持てないので、枠のグラデーションは使えない。 細い枠では階調より「きわの線のはっきりさ」の方が金属らしく見えるため、 1pxの濃い線を外に添えて、シルバーの面との段差で金属の感じを作る。 ■ 個別上書きの仕組み ギャラリー全体の値は「入れ物そのもの」に置く。カスタムプロパティは 下へ受け継がれるので、受賞ページやご家族の声のように写真が何階層か下に あっても届く。写真1枚だけの上書きは、その写真自身に同じ変数を全部書く。 自分に書かれた値は、受け継いだ値より必ず優先されるので、混ざらない。 ■ 背景がほぼ白であること このサイトの背景は #fffefc。白いフチは背景と同じ色なので、フチだけでは 輪郭が出ない。線と影を必ず添えて、額のきわが見えるようにする。 ■ 額を使える入れ物 「作品として見せる写真」だけを対象にする。案内・商品・手順の写真には 付けない。額は「これは作品です」という意味を足してしまうため。 一覧は functions.php の kowa_gallery_ex_containers() と必ず同じにする。 使える .kowa-photo-grid 撮影ギャラリー（各ページ・/gallery/） .kowa-page-hero-strip ページ冒頭の写真帯（代表作3枚） .kowa-award-record 受賞・掲載歴（受賞作品そのもの） .kowa-portrait-grid 肖像写真（長く飾るための写真） .kowa-12year-band 12年アルバム .kowa-profile-strip プロフィール写真の作例 .kowa-voice ご家族の声（3.34.66 オーナー判断で追加） 使えない（理由つき） .kowa-costume-grid 衣装の紹介＝商品の一覧 .kowa-shop-grid/store-card 店舗案内＝地図・住所と並ぶ実用情報 .kowa-company-story-grid 会社紹介＝文章に添える説明写真 .kowa-media-grid テレビ出演の記録写真＝作品ではない .kowa-price-card-grid 料金カード＝商品の見出し .kowa-netsales-steps ネット販売の手順図 .kowa-idphoto-sheet 証明写真の仕上がり見本＝実用写真 HOME一式（ヒーロー／PHOTO MENU／HOMEギャラリー／キャンペーン） オーナー確定済みの区画。指示があるまで触らない ■ 拡大表示（ライトボックス）3.34.66 押した写真と同じ額を、拡大表示にも回す。拡大表示の中で写真にぴったり 重なっている要素は img だけなので、1枚の img に4本の帯を作る。 　外→内：outline（きわ）→ border（アルミ）→ padding（マット）→ 写真 padding は「絵が描かれる場所（コンテンツボックス）」の外側なので、 置き換え要素（img）でも写真がその分だけ内側に収まる。 JS は「どの額か」をクラスで伝えるだけで、開閉・送りの処理には触らない。 ========================================================================== */ /* 額の太さ。画面が狭いほど細くする。 .kowa-lightbox は入れ物の外（body直下）に作られるので、ここにも同じ値を置く。 置かないと var() が解決できず、額の指定がまるごと無効になる。 */ .kowa-photo-grid, .kowa-page-hero-strip, .kowa-award-record, .kowa-portrait-grid, .kowa-12year-band, .kowa-profile-strip, .kowa-voice, .kowa-lightbox{ --kowa-ex-mat:clamp(6px,.85vw,12px); /* ミュージアムホワイトの白フチ */ --kowa-ex-matwide:clamp(16px,2.6vw,38px); /* 額装のマット（広めにとると高級感が出る） */ --kowa-ex-alu:4px; /* アルミフレーム（細身・4px固定） */ /* アルミの面。模様（筋）は描かない。 上から下へ、明るい→暗いの光沢をつけるだけ。 border-image は各辺に4pxの切り出しを割り当てるので、 上辺が明るく、下辺が暗く、左右はその間の階調になる。 枠は4px固定。下絵の帯も4pxなので、帯の太さ方向は拡大縮小が起きない。 長さ方向は stretch（引き伸ばし）にする。repeat（並べて敷く）にすると、 16pxごとに下絵の継ぎ目が出て、枠が点線のように見えてしまう。 ※ 筋を描くと1本が画面のドットより細くなって間引かれ、 「横縞」として出てしまう（3.34.62 で実際にそうなった）。 */ --kowa-ex-alusilver:url("data:image/svg+xml,") 4 stretch; } /* ---- 値を決める（入れ物ぜんたい） ---- 入れ物そのものに書く。カスタムプロパティは下へ受け継がれるので、 受賞ページやご家族の声のように写真が何階層か下にあっても同じ値が届く。 どのスタイルも同じ変数をすべて書く。書き残すと前の指定が残ってしまう。 */ /* ミュージアムホワイト：白フチ＋控えめな影 背景（#fffefc）と白フチはほぼ同じ色なので、きわに細い線を1本引き、 落ちる影を添えて輪郭を出す。 */ :is(.kowa-photo-grid,.kowa-page-hero-strip,.kowa-award-record,.kowa-portrait-grid,.kowa-12year-band,.kowa-profile-strip,.kowa-voice,.kowa-lightbox).kowa-gallery-ex-museum, .kowa-photo-ex-museum{ --kowa-ex-band-w:var(--kowa-ex-mat); --kowa-ex-band-c:#fff; --kowa-ex-band-image:none; --kowa-ex-edge-w:1px; --kowa-ex-edge-c:rgba(58,52,47,.22); --kowa-ex-photomat-w:0px; --kowa-ex-photomat-c:transparent; --kowa-ex-photolip-c:transparent; --kowa-ex-bevel-c:transparent; --kowa-ex-shadow:0 2px 5px -1px rgba(58,52,47,.20),0 10px 22px -8px rgba(58,52,47,.30); --kowa-ex-shadow-hover:0 4px 10px -1px rgba(58,52,47,.30),0 22px 42px -10px rgba(58,52,47,.50); --kowa-ex-radius:0px; } /* ファインアートフレーム：細身のアルミフレーム＋白〜アイボリーのマット 外から内へ「1pxのきわ → アルミ枠 → 広いマット → 写真」。 ・枠 … タイルの border。border-image で上下のグラデーションを敷く。 ・きわ … outline（offset を -1px にして枠の外側1pxに重ねる）。 金属のきわがはっきりすると、ぐっと額らしく見える。 ・マット … 写真そのものの border。 写真は object-fit:cover なので、border を付けると 絵の部分だけが内側に収まり、外周にマットの帯が出る。 タイルの外形も写真の箱の位置も変わらないので、並びに影響しない。 */ :is(.kowa-photo-grid,.kowa-page-hero-strip,.kowa-award-record,.kowa-portrait-grid,.kowa-12year-band,.kowa-profile-strip,.kowa-voice,.kowa-lightbox).kowa-gallery-ex-fineart, .kowa-photo-ex-fineart{ --kowa-ex-band-w:var(--kowa-ex-alu); --kowa-ex-band-c:#cbc6ba; /* border-image が効かない環境の下地 */ --kowa-ex-band-image:var(--kowa-ex-alusilver); --kowa-ex-edge-w:1px; --kowa-ex-edge-c:rgba(70,66,58,.62); /* 枠のいちばん外の線 */ --kowa-ex-photomat-w:var(--kowa-ex-matwide); /* マットは写真側に付ける */ --kowa-ex-photomat-c:#faf7f1; --kowa-ex-photolip-c:rgba(120,115,105,.38); /* マットの外側（アルミの内側）の細いきわ */ --kowa-ex-bevel-c:rgba(255,255,255,.9); /* マット窓のベベル（45度の切り口） */ --kowa-ex-shadow:0 1px 3px rgba(40,36,31,.16),0 9px 20px -10px rgba(40,36,31,.30); --kowa-ex-shadow-hover:0 2px 6px -1px rgba(40,36,31,.18),0 18px 34px -12px rgba(40,36,31,.40); --kowa-ex-radius:0px; } /* フローティングプリント（ボード風）：写真が背景から少し浮いて見える 白い背景では影が弱いと沈んで見える。 「接している近い影」と「遠くへ広がる影」を重ねると、距離が出て浮いて見える。 */ :is(.kowa-photo-grid,.kowa-page-hero-strip,.kowa-award-record,.kowa-portrait-grid,.kowa-12year-band,.kowa-profile-strip,.kowa-voice,.kowa-lightbox).kowa-gallery-ex-float, .kowa-photo-ex-float{ --kowa-ex-band-w:0px; --kowa-ex-band-c:transparent; --kowa-ex-band-image:none; --kowa-ex-edge-w:0px; --kowa-ex-edge-c:transparent; --kowa-ex-photomat-w:0px; --kowa-ex-photomat-c:transparent; --kowa-ex-photolip-c:transparent; --kowa-ex-bevel-c:transparent; --kowa-ex-shadow:0 1px 2px rgba(58,52,47,.20),0 4px 10px -2px rgba(58,52,47,.24),0 20px 38px -12px rgba(58,52,47,.52); --kowa-ex-shadow-hover:0 2px 5px rgba(58,52,47,.28),0 10px 20px -2px rgba(58,52,47,.36),0 38px 62px -14px rgba(58,52,47,.66); --kowa-ex-radius:2px; } /* この写真だけ額をつけない（入れ物ぜんたいの指定から外す） */ .kowa-photo-ex-plain{ --kowa-ex-band-w:0px; --kowa-ex-band-c:transparent; --kowa-ex-band-image:none; --kowa-ex-edge-w:0px; --kowa-ex-edge-c:transparent; --kowa-ex-photomat-w:0px; --kowa-ex-photomat-c:transparent; --kowa-ex-photolip-c:transparent; --kowa-ex-bevel-c:transparent; --kowa-ex-shadow:none; --kowa-ex-shadow-hover:none; --kowa-ex-radius:0px; } /* 額のある展示は、写真どうしの間隔を少し広くとる。 間隔は入れ物側で1回だけ決める決まりなので、1枚あたりの幅の計算も自動でそろう。 3.34.66：額は「まとまりぜんたい」からも「写真1枚ずつ」からも指定できる。 3.34.65 までは入れ物側のクラスしか見ておらず、写真1枚ずつに指定したときだけ 間隔が広がらなかった（実測：ギャラリー 23.04px と 15.36px／ 冒頭の帯 23.04px と 11.52px）。同じ見た目を選んだのに指定の仕方で 間隔が変わるのはおかしいので、どちらの指定でも広げる。 */ .kowa-photo-grid[class*="kowa-gallery-ex-"], .kowa-photo-grid:has(>[class*="kowa-photo-ex-"]:not(.kowa-photo-ex-plain)){--kowa-tile-gap:clamp(14px,1.8vw,28px)} /* ページ冒頭の写真帯は間隔が 6〜14px しかない。額を付けると隣とくっついて 見えるので、選ばれたときだけ広げる。1枚あたりの幅はこの変数から計算されて いるので、写真の大きさも自動でそろう（theme.css 側の計算式はそのまま）。 */ .kowa-page-hero-strip[class*="kowa-gallery-ex-"], .kowa-page-hero-strip:has(>[class*="kowa-photo-ex-"]:not(.kowa-photo-ex-plain)){--kowa-strip-gap:clamp(14px,1.8vw,28px)} /* ご家族の声の写真は丸い（img に border-radius:50%）。 額も写真の形に合わせないと、丸い写真に四角い枠が付いてしまう。 写真側の指定（.kowa-photo-ex-…）より詳細度を高くして、必ず勝たせる。 */ .kowa-voice .kowa-voice-photo{--kowa-ex-radius:50%} /* ---- 値を使う ---- 展示スタイルが選ばれている写真だけに当てる。 選ばれていない入れ物には1行も当たらないので、今までの見え方は変わらない。 色や文字の指定ではないので !important は使わない。 受賞・掲載歴（.kowa-award-figure）とご家族の声（.kowa-voice-photo）は 写真が何階層か下にあるので、子セレクタ（>）ではなく子孫セレクタで指す。 詳細度は他と同じ (0,3,0)。 */ /* 額そのもの（枠・いちばん外のきわ・落ちる影） */ :is(.kowa-photo-grid,.kowa-page-hero-strip,.kowa-award-record,.kowa-portrait-grid,.kowa-12year-band,.kowa-profile-strip,.kowa-voice)[class*="kowa-gallery-ex-"]>:is(.wp-block-cover,.wp-block-image), :is(.kowa-photo-grid,.kowa-page-hero-strip,.kowa-award-record,.kowa-portrait-grid,.kowa-12year-band,.kowa-profile-strip,.kowa-voice)[class*="kowa-gallery-ex-"] :is(.kowa-award-figure,.kowa-voice-photo), :is(.kowa-photo-grid,.kowa-page-hero-strip,.kowa-award-record,.kowa-portrait-grid,.kowa-12year-band,.kowa-profile-strip,.kowa-voice)>:is(.wp-block-cover,.wp-block-image)[class*="kowa-photo-ex-"], :is(.kowa-photo-grid,.kowa-page-hero-strip,.kowa-award-record,.kowa-portrait-grid,.kowa-12year-band,.kowa-profile-strip,.kowa-voice) :is(.kowa-award-figure,.kowa-voice-photo)[class*="kowa-photo-ex-"]{ /* 編集画面のキャンバスには公開画面の * { box-sizing:border-box } が 読み込まれない。指定しないと、枠の分だけタイルが外へふくらむ。 */ box-sizing:border-box; position:relative; /* マット窓のベベル（::after）の基準 */ overflow:visible; /* 図のとき、落ちる影が切れないように */ border:var(--kowa-ex-band-w,0px) solid var(--kowa-ex-band-c,transparent); border-image:var(--kowa-ex-band-image,none); box-shadow:var(--kowa-ex-shadow,none); border-radius:var(--kowa-ex-radius,0px); outline:var(--kowa-ex-edge-w,0px) solid var(--kowa-ex-edge-c,transparent); outline-offset:calc(-1 * var(--kowa-ex-edge-w,0px)); transition:box-shadow .32s var(--kowa-ease,ease); } /* マットは写真そのものに付ける。 写真の箱の位置と大きさは変えないので、並びにもトリミングの基準にも影響しない。 */ :is(.kowa-photo-grid,.kowa-page-hero-strip,.kowa-award-record,.kowa-portrait-grid,.kowa-12year-band,.kowa-profile-strip,.kowa-voice)[class*="kowa-gallery-ex-"]>.wp-block-cover .wp-block-cover__image-background, :is(.kowa-photo-grid,.kowa-page-hero-strip,.kowa-award-record,.kowa-portrait-grid,.kowa-12year-band,.kowa-profile-strip,.kowa-voice)[class*="kowa-gallery-ex-"]>.wp-block-image img, :is(.kowa-photo-grid,.kowa-page-hero-strip,.kowa-award-record,.kowa-portrait-grid,.kowa-12year-band,.kowa-profile-strip,.kowa-voice)[class*="kowa-gallery-ex-"] :is(.kowa-award-figure,.kowa-voice-photo) img, :is(.kowa-photo-grid,.kowa-page-hero-strip,.kowa-award-record,.kowa-portrait-grid,.kowa-12year-band,.kowa-profile-strip,.kowa-voice)>.wp-block-cover[class*="kowa-photo-ex-"] .wp-block-cover__image-background, :is(.kowa-photo-grid,.kowa-page-hero-strip,.kowa-award-record,.kowa-portrait-grid,.kowa-12year-band,.kowa-profile-strip,.kowa-voice)>.wp-block-image[class*="kowa-photo-ex-"] img, :is(.kowa-photo-grid,.kowa-page-hero-strip,.kowa-award-record,.kowa-portrait-grid,.kowa-12year-band,.kowa-profile-strip,.kowa-voice) :is(.kowa-award-figure,.kowa-voice-photo)[class*="kowa-photo-ex-"] img{ /* 編集画面のキャンバスには公開画面の * { box-sizing:border-box } が読み込まれない。 指定しないと、マットの分だけ写真がタイルの外へはみ出す（実機で確認）。 border-box のもとでは 幅・高さ・最大幅・最大高 がすべて「枠線まで」を 指すので、外形は変わらず、絵の部分だけが内側に収まる。縦横比も変わらない。 */ box-sizing:border-box; border:var(--kowa-ex-photomat-w,0px) solid var(--kowa-ex-photomat-c,transparent); outline:1px solid var(--kowa-ex-photolip-c,transparent); outline-offset:-1px; } /* トリミング（写真の構図：位置・拡大・比率）を使っている写真の額（3.34.102） 上の書き方は「写真そのもの（img）の border」をマットにしている。 トリミングした写真は img に transform（translate・scale）が掛かるので、 その border（マット）ごと拡大・移動され、額の外や隣の写真の上へはみ出していた （写真を差し替えて拡大し、額を付けたときに起きる）。 この場合だけ、マットを写真機能の「白フチ」と同じ仕組みで作る。 ・アルミ枠 … タイルの border（上と同じ。外形は変わらない） ・マット … --kowa-photo-inset で写真viewportを内側へ縮め、地色を塗る （写真機能が img を inset の内側に置き、cover・位置・拡大を計算し直す） ・写真 … 写真viewport（img の元の箱）の外へ出た分を切る（--kowa-photo-clip） マットは変形しないので、拡大しても位置を変えても額の内側に収まる。 タイルの overflow は影を見せるため visible のまま（写真は自分で切られている）。 図（.wp-block-image）は外側フレームが中の .kowa-photo-crop-media なので、地色はそちらに塗る。 */ :is(.kowa-photo-grid,.kowa-page-hero-strip,.kowa-award-record,.kowa-portrait-grid,.kowa-12year-band,.kowa-profile-strip,.kowa-voice)[class*="kowa-gallery-ex-"]>:is(.wp-block-cover,.wp-block-image).kowa-photo-display, :is(.kowa-photo-grid,.kowa-page-hero-strip,.kowa-award-record,.kowa-portrait-grid,.kowa-12year-band,.kowa-profile-strip,.kowa-voice)>:is(.wp-block-cover,.wp-block-image).kowa-photo-display[class*="kowa-photo-ex-"]{ --kowa-photo-inset:var(--kowa-ex-photomat-w,0px); --kowa-photo-clip:var(--kowa-photo-clip-viewport); box-shadow:inset 0 0 0 1px var(--kowa-ex-photolip-c,transparent),var(--kowa-ex-shadow,none); } :is(.kowa-photo-grid,.kowa-page-hero-strip,.kowa-award-record,.kowa-portrait-grid,.kowa-12year-band,.kowa-profile-strip,.kowa-voice)[class*="kowa-gallery-ex-"]>:is(.wp-block-cover,.wp-block-image).kowa-photo-display:hover, :is(.kowa-photo-grid,.kowa-page-hero-strip,.kowa-award-record,.kowa-portrait-grid,.kowa-12year-band,.kowa-profile-strip,.kowa-voice)>:is(.wp-block-cover,.wp-block-image).kowa-photo-display[class*="kowa-photo-ex-"]:hover{ box-shadow:inset 0 0 0 1px var(--kowa-ex-photolip-c,transparent),var(--kowa-ex-shadow-hover,var(--kowa-ex-shadow,none)); } :is(.kowa-photo-grid,.kowa-page-hero-strip,.kowa-award-record,.kowa-portrait-grid,.kowa-12year-band,.kowa-profile-strip,.kowa-voice)[class*="kowa-gallery-ex-"]>.wp-block-cover.kowa-photo-display, :is(.kowa-photo-grid,.kowa-page-hero-strip,.kowa-award-record,.kowa-portrait-grid,.kowa-12year-band,.kowa-profile-strip,.kowa-voice)>.wp-block-cover.kowa-photo-display[class*="kowa-photo-ex-"], :is(.kowa-photo-grid,.kowa-page-hero-strip,.kowa-award-record,.kowa-portrait-grid,.kowa-12year-band,.kowa-profile-strip,.kowa-voice)[class*="kowa-gallery-ex-"]>.wp-block-image.kowa-photo-display .kowa-photo-crop-media, :is(.kowa-photo-grid,.kowa-page-hero-strip,.kowa-award-record,.kowa-portrait-grid,.kowa-12year-band,.kowa-profile-strip,.kowa-voice)>.wp-block-image.kowa-photo-display[class*="kowa-photo-ex-"] .kowa-photo-crop-media{ background-color:var(--kowa-ex-photomat-c,transparent); background-clip:padding-box; } /* 写真そのものにはマットを付けない（上の「マットは写真そのものに付ける」を打ち消す） */ :is(.kowa-photo-grid,.kowa-page-hero-strip,.kowa-award-record,.kowa-portrait-grid,.kowa-12year-band,.kowa-profile-strip,.kowa-voice)[class*="kowa-gallery-ex-"]>.wp-block-cover.kowa-photo-display .wp-block-cover__image-background, :is(.kowa-photo-grid,.kowa-page-hero-strip,.kowa-award-record,.kowa-portrait-grid,.kowa-12year-band,.kowa-profile-strip,.kowa-voice)[class*="kowa-gallery-ex-"]>.wp-block-image.kowa-photo-display img, :is(.kowa-photo-grid,.kowa-page-hero-strip,.kowa-award-record,.kowa-portrait-grid,.kowa-12year-band,.kowa-profile-strip,.kowa-voice)>.wp-block-cover.kowa-photo-display[class*="kowa-photo-ex-"] .wp-block-cover__image-background, :is(.kowa-photo-grid,.kowa-page-hero-strip,.kowa-award-record,.kowa-portrait-grid,.kowa-12year-band,.kowa-profile-strip,.kowa-voice)>.wp-block-image.kowa-photo-display[class*="kowa-photo-ex-"] img{ border:0; outline:0; } /* 額の展示スタイルの選択が「写真1枚だけ額なし」のときは、上の指定も効かせない */ :is(.kowa-photo-grid,.kowa-page-hero-strip,.kowa-award-record,.kowa-portrait-grid,.kowa-12year-band,.kowa-profile-strip,.kowa-voice)>:is(.wp-block-cover,.wp-block-image).kowa-photo-display.kowa-photo-ex-plain{ --kowa-photo-inset:0px; --kowa-photo-clip:none; } /* マット窓のベベル線。写真のきわに1pxの明るい線を重ねる。 タイルの ::after なので、写真より後ろに書かれる＝写真の上に描かれる。 場所を取らず、クリック（拡大表示）も邪魔しない。 border-radius:inherit で、丸い写真（ご家族の声）にも形が合う。 */ :is(.kowa-photo-grid,.kowa-page-hero-strip,.kowa-award-record,.kowa-portrait-grid,.kowa-12year-band,.kowa-profile-strip,.kowa-voice)[class*="kowa-gallery-ex-"]>:is(.wp-block-cover,.wp-block-image)::after, :is(.kowa-photo-grid,.kowa-page-hero-strip,.kowa-award-record,.kowa-portrait-grid,.kowa-12year-band,.kowa-profile-strip,.kowa-voice)[class*="kowa-gallery-ex-"] :is(.kowa-award-figure,.kowa-voice-photo)::after, :is(.kowa-photo-grid,.kowa-page-hero-strip,.kowa-award-record,.kowa-portrait-grid,.kowa-12year-band,.kowa-profile-strip,.kowa-voice)>:is(.wp-block-cover,.wp-block-image)[class*="kowa-photo-ex-"]::after, :is(.kowa-photo-grid,.kowa-page-hero-strip,.kowa-award-record,.kowa-portrait-grid,.kowa-12year-band,.kowa-profile-strip,.kowa-voice) :is(.kowa-award-figure,.kowa-voice-photo)[class*="kowa-photo-ex-"]::after{ content:'';position:absolute; inset:var(--kowa-ex-photomat-w,0px); border-radius:inherit; box-shadow:0 0 0 1px var(--kowa-ex-bevel-c,transparent); pointer-events:none; } /* hover は額（影）だけを動かす。写真そのものの明るさは変えない。 */ :is(.kowa-photo-grid,.kowa-page-hero-strip,.kowa-award-record,.kowa-portrait-grid,.kowa-12year-band,.kowa-profile-strip,.kowa-voice)[class*="kowa-gallery-ex-"]>:is(.wp-block-cover,.wp-block-image):hover, :is(.kowa-photo-grid,.kowa-page-hero-strip,.kowa-award-record,.kowa-portrait-grid,.kowa-12year-band,.kowa-profile-strip,.kowa-voice)[class*="kowa-gallery-ex-"] :is(.kowa-award-figure,.kowa-voice-photo):hover, :is(.kowa-photo-grid,.kowa-page-hero-strip,.kowa-award-record,.kowa-portrait-grid,.kowa-12year-band,.kowa-profile-strip,.kowa-voice)>:is(.wp-block-cover,.wp-block-image)[class*="kowa-photo-ex-"]:hover, :is(.kowa-photo-grid,.kowa-page-hero-strip,.kowa-award-record,.kowa-portrait-grid,.kowa-12year-band,.kowa-profile-strip,.kowa-voice) :is(.kowa-award-figure,.kowa-voice-photo)[class*="kowa-photo-ex-"]:hover{ box-shadow:var(--kowa-ex-shadow-hover,var(--kowa-ex-shadow,none)); } /* ========================================================================== 拡大表示（ライトボックス）3.34.66 押した写真と同じ額を回す。site.js が「どの額か」を .kowa-lightbox に kowa-photo-ex-… として付けるだけで、 開閉・左右送り・キーボード操作・フォーカスの処理には触っていない。 拡大表示の中で写真にぴったり重なっているのは img だけなので、 1枚の img に帯を4本作る。外から内へ： outline（-1px）… いちばん外のきわ border … アルミ枠（border-image で公開画面と同じ下絵） padding … マット。置き換え要素でも、絵はこの内側に描かれる 背景＋内側の影 … マットの色と、写真のきわの1pxのベベル 内側の影は先に書いた層が上に来る。 1枚目：1px の「マットの外側のきわ」 2枚目：マット色を（マット幅−1px）ぶん塗る 残り1px は背景色（ベベル）が見える＝写真のきわに明るい線 box-sizing:border-box なので、額を足しても max-width/max-height の 範囲に収まり、画面からはみ出さない。 */ .kowa-lightbox[class*="kowa-photo-ex-"] .kowa-lightbox__image{ box-sizing:border-box; padding:var(--kowa-ex-photomat-w,0px); background:var(--kowa-ex-bevel-c,transparent); border:var(--kowa-ex-band-w,0px) solid var(--kowa-ex-band-c,transparent); border-image:var(--kowa-ex-band-image,none); border-radius:var(--kowa-ex-radius,0px); outline:var(--kowa-ex-edge-w,0px) solid var(--kowa-ex-edge-c,transparent); outline-offset:calc(-1 * var(--kowa-ex-edge-w,0px)); box-shadow: inset 0 0 0 1px var(--kowa-ex-photolip-c,transparent), inset 0 0 0 max(0px,calc(var(--kowa-ex-photomat-w,0px) - 1px)) var(--kowa-ex-photomat-c,transparent), 0 12px 42px rgba(0,0,0,.35); } /* 3.34.102：トリミングした写真の拡大表示（.kowa-lightbox__crop）では、 写真は枠の中で位置・拡大されるので、上のように img に帯を作ると帯ごと動いてしまう。 公開画面のトリミングした写真と同じく、額は枠に作り、マットは写真viewportの内側の余白 （--kowa-photo-inset）にする。写真は写真viewportの外を切る。 */ .kowa-lightbox[class*="kowa-photo-ex-"] .kowa-lightbox__crop{ --kowa-photo-inset:var(--kowa-ex-photomat-w,0px); --kowa-photo-clip:var(--kowa-photo-clip-viewport); background-color:var(--kowa-ex-photomat-c,transparent); background-clip:padding-box; border:var(--kowa-ex-band-w,0px) solid var(--kowa-ex-band-c,transparent); border-image:var(--kowa-ex-band-image,none); border-radius:var(--kowa-ex-radius,0px); outline:var(--kowa-ex-edge-w,0px) solid var(--kowa-ex-edge-c,transparent); outline-offset:calc(-1 * var(--kowa-ex-edge-w,0px)); box-shadow:inset 0 0 0 1px var(--kowa-ex-photolip-c,transparent),0 12px 42px rgba(0,0,0,.35); } .kowa-lightbox[class*="kowa-photo-ex-"] .kowa-lightbox__crop>.kowa-lightbox__image{ padding:0;border:0;border-radius:0;outline:0;background:none;box-shadow:none; }