@charset "UTF-8";
/*
* FP(FunPhotos) スタイル 1/4 ―― 土台
*
* prototype-otanoshimi.css（7,586行）を4つに割ったうちの 1つめ
* （2026-08-26 のリファクタリング。**中身は1文字も変えていない** ――
* 4つをこの順に連結すると、割る前のファイルと一致する）。
*
* **読み込み順が意味を持つ。** 後ろの規則が前を上書きしている箇所が
* 実在するので、hs_fp_head() は必ずこの順で4つの を出す:
* 1. fp-base.css …… 土台。box-sizing の一覧・帯・撮影一覧・お試し
* 2. fp-shop.css …… 購入モーダル（従来と v2 の枠）
* 3. fp-screens.css …… TOP反映・撮影開始/再生中/現像の演出・ご注意
* 4. fp-late.css …… あとから重ねた調整と上書き。**必ず最後**
* 順を変えたいときは、先に該当の規則を1ファイルへ寄せてから。
*/
/* ↑ content の絵文字（🎁 等）のための明示。無いと、参照元の
文字コード推定が外れた環境で「🎷」のような文字化けになる。 */
:root {
/* ダイアログの面の地色は**ここだけが持つ**（利用者の指示・2026-08-25
「地の色 もう1つの濃紺グラデーションにそろえる」）。
以前は面ごとに4通りへ割れていた ―― 180°と165°のグラデーション、
単色の #2d1b9a と #24167f。並べて比べないと気づかない差だった。
**各面はこの変数を見るだけにして、色はここで1回だけ決める。** */
--fp-dialog-bg: linear-gradient(165deg, #1b1d52, #12143c);
}
/* お楽しみ動画フォト — 検証用プロトタイプのスタイル
hs_fp_enabled が有効なサイトでのみ読み込まれる。 */
/* このプロトタイプが足す要素は、幅指定に padding が上乗せされて
画面幅を超え、横スクロール（左右の揺れ）を起こしやすい。
自前の要素はまとめて border-box にしておく。 */
#fp-develop-bar, #fp-develop-bar *,
#fp-shutter-bar, #fp-shutter-bar *,
#fp-shop-modal, #fp-shop-modal *,
#fp-dl-modal, #fp-dl-modal *,
#fp-refill, #fp-refill *,
#fp-toast,
#fp-devbar, #fp-devbar * {
box-sizing: border-box;
}
/* 押すものの文字は選択できないようにする。
スマホでボタンを長押し・二度押しすると文字が青く選択されてしまい、
押せていないように見える（選択が残ったまま次の操作をすることになる）。
読ませる文章ではないので、選択できて得るものが無い。
対象は「押すもの」だけに絞る。注意書きや残数の文言まで止めると、
利用者が控えたいときにコピーできなくなる。 */
.fp-dev-more,
.fp-plan,
.fp-shutter-btn,
.fp-modal-close,
.fp-trial-yes,
.fp-trial-no,
.fp-buy-shutter,
.fp-refill-btn,
.fp-goods-sample-link,
#fp-develop-bar button,
#fp-shutter-bar button,
#fp-shop-modal button,
.fp-dl-agree,
.fp-dl-submit,
.fp-devbox-dl,
.fp-devbox-dl * {
-webkit-user-select: none;
user-select: none;
/* 長押しでiOSが出す「コピー/共有」の吹き出しも止める */
-webkit-touch-callout: none;
}
/* 手書きマーカー体（Permanent Marker）。CDNに依存せずテーマ同梱で配信する。
現像後のキャプション「Nice Capture !」「To: ◯◯」に使う。
※ @font-face はセレクタ列の途中に置かないこと。置くとその前の
セレクタ列ごと丸ごと無効になり、border-box が効かなくなる。 */
@font-face {
font-family: 'Permanent Marker';
font-style: normal;
font-weight: 400;
font-display: swap;
src: url('../fonts/permanent-marker/PermanentMarker-Regular.woff2') format('woff2');
}
/* ---------------- シャッター: フラッシュ演出 ---------------- */
#fp-flash {
position: fixed;
inset: 0;
z-index: 9500;
background: #fff;
opacity: 0;
pointer-events: none;
}
#fp-flash.is-firing {
animation: fp-flash-anim 420ms ease-out;
}
@keyframes fp-flash-anim {
0% { opacity: 0; }
8% { opacity: 0.95; }
100% { opacity: 0; }
}
/* ---------------- トースト ---------------- */
#fp-toast {
position: fixed;
left: 50%;
bottom: 120px;
transform: translateX(-50%) translateY(10px);
/* モーダル(購入=2147482900/案内=2147483000)の上にも出す。
「決済画面へ移動します…」等はモーダル表示中に出るため。 */
z-index: 2147483400;
max-width: 88vw;
padding: 10px 18px;
border-radius: 999px;
background: rgba(20, 20, 40, 0.92);
/* **白は !important で固定する。** 明るい背景のサイトでは、全体の動的CSS
（general_style_css）が全要素に `color:#000 !important` を当てるため、
素の #fff は負けて黒い面に黒い文字になっていた
（利用者の指摘・2026-08-18「ここは文字が白」）。CLAUDE.md の定石3。 */
color: #fff !important;
-webkit-text-fill-color: #fff !important;
font-size: 13px;
text-align: center;
opacity: 0;
transition: opacity 220ms ease, transform 220ms ease;
pointer-events: none;
}
#fp-toast.is-visible {
opacity: 1;
transform: translateX(-50%) translateY(0);
}
/* スマホはシャッターボタンが画面下にあり、トーストと近くなる。少し上げる。 */
@media (max-width: 768px) {
#fp-toast {
bottom: 180px;
}
}
/* ---------------- 撮影一覧: ポラロイド枠 ---------------- */
/* 装飾（マスク／ポラロイド化）が済むまでカードを見せない。
読み込み直後に素の一覧が一瞬見えるチラつきを防ぐとともに、
未現像の中身が装飾前に覗いてしまうのも防ぐ。
decorateCard が付ける data-fp-done を目印にする。 */
body.hs-fp .capturedlist[data-capturetiming]:not([data-fp-done]),
body.hs-fp-develop .capturedlist[data-capturetiming]:not([data-fp-done]) {
visibility: hidden;
}
/* 印画紙に見立てた枠。下だけ広いのがポラロイドの特徴。
box-sizing を指定しないと padding のぶんカードが広がり、隣のカードと重なる。 */
.capturedlist.fp-polaroid {
box-sizing: border-box;
width: 100%;
max-width: 100%;
/* 印画紙の地色は白（利用者の指示・2026-08-18「ポロライドの背景色は#fff」）。
以前はクリーム色（#f4f1e8）だった。 */
background: #fff;
padding: 12px 12px 48px;
/* 撮影一覧側が .capturedlist に border-radius:10px !important を当てているため、
こちらも !important で上書きする（印画紙なのでほぼ角のない見た目にする）。 */
border-radius: 2px !important;
/* 背景が明るいサイトでも印画紙が浮いて見えるよう、控えめな影を落とす */
box-shadow: 0 2px 10px rgba(0, 0, 0, 0.25);
}
.capturedlist.fp-polaroid .capturedlistImage {
display: block;
width: 100%;
height: auto;
border-radius: 0;
/* 印画紙の白地の上で写真が浮いて見えるように、薄い影を落とす */
box-shadow: 0px 1px 3px rgba(0, 0, 0, 0.3);
background: #0b0b18;
}
/* 撮影者と著作権の表示は、拡大表示と同じ組み立てにする。
白帯ではなく写真の右下へ白で重ねる（帯は宛名の場所として空ける）。
位置は下帯48px・左右の余白12pxから逆算する。絶対配置の基準は
余白の外側なので、余白のぶんを足さないと写真の外に出る。 */
.capturedlist.fp-polaroid .copyright {
position: absolute;
left: auto;
right: 18px; /* 余白12px + 写真の内側へ6px */
bottom: 54px; /* 下帯48px + 写真の内側へ6px */
top: auto;
height: auto;
display: block;
margin: 0;
/* サイト全体の動的CSSが本文の文字サイズを !important で当ててくるため、
こちらも同じ強さで指定しないと拡大されてしまう。 */
font-size: 10px !important;
line-height: 1.45 !important;
text-align: right;
font-weight: 600;
color: #fff !important;
-webkit-text-fill-color: #fff !important;
text-shadow: 0 1px 2px rgba(0, 0, 0, .95),
1px 0 2px rgba(0, 0, 0, .8),
-1px 0 2px rgba(0, 0, 0, .8);
}
/* 当たりを現像したカードの宛名。拡大表示と同じく帯の中央に置く。 */
.capturedlist.fp-polaroid .fp-card-to {
position: absolute;
left: 0;
right: 0;
bottom: 12px;
text-align: center;
font-family: 'Permanent Marker', "Chakra Petch", cursive, sans-serif;
font-size: 16px !important;
letter-spacing: .04em;
color: #e8b44a !important;
-webkit-text-fill-color: #e8b44a !important;
pointer-events: none;
}
/* PCは一覧のカードも大きく出るので、宛名も一回り大きくする */
@media (min-width: 900px) {
.capturedlist.fp-polaroid .fp-card-to { bottom: 11px; font-size: 18px !important; }
}
/* ガチャの選択状態の札。**写真の右上**に置く（利用者の指示・2026-08-13
「ラベルの位置を逆にして」―― 商品名タグと入れ替えた）。
**枠（ポラロイド）の有無で出し分けない**（2026-08-24）――
写真の見せ方を設定で選べるようにしたので、フレームレスにしただけで
札が素の見た目に落ちないようにする。
「購入商品を選定」タブの札と同じ言葉・同じ色分け
（選択済＝緑／未選択＝灰）。 */
.capturedlist .fp-select-state,
#pageDetailsFramed .fp-select-state {
position: absolute;
top: 20px;
right: 20px;
padding: 3px 12px;
border-radius: 999px;
background: #8a8f98;
color: #fff !important;
-webkit-text-fill-color: #fff;
font-size: 11px;
font-weight: 700;
letter-spacing: .04em;
white-space: nowrap;
z-index: 28;
}
.capturedlist .fp-select-state.is-done,
#pageDetailsFramed .fp-select-state.is-done { background: #4CAF50; }
/* 選定は済んだが送料はまだ（琥珀）。緑＝支払い済と混ざらない色にする
（利用者の指示・2026-08-14）。 */
.capturedlist .fp-select-state.is-pending,
#pageDetailsFramed .fp-select-state.is-pending { background: #8a6520; }
/* 選べる枠がもう無い（選択不可）。灰のまま、**一段沈めて**押せないことを示す
―― 別の色を足すと状態が増えたように見える（利用者の指示・2026-08-15）。 */
.capturedlist .fp-select-state.is-locked,
#pageDetailsFramed .fp-select-state.is-locked { background: #5a5f68; opacity: .85; }
/* 拡大表示の札は、**広い画面だけ**一回り大きくする。スマホでは面が
一覧のカードとほぼ同じ大きさなので、そろえたまま変えない（利用者の指示）。 */
@media (min-width: 769px) {
#pageDetailsFramed .fp-select-state { font-size: 13px; padding: 4px 14px; }
}
/* 商品名タグ（トレカ／???）は**ポラロイド下辺の余白**へ（同じ入れ替えの片割れ）。
基点の .fp-trial-tag（右上・top/right 20px）より強いセレクタで上書きする。
見た目は黒い札をやめて「🎁 商品名」の素の文字にする（利用者の指示・
2026-08-13）。余白は印画紙のクリーム色なので文字は濃色、字も一回り
大きくして読ませる。アイコンは ::before で足す ―― マークアップ
（React と 拡大表示のJS）を触らずに、両方へ同時に効かせるため。 */
body.hs-fp .capturedlist.fp-polaroid .fp-prize-tag {
top: auto;
right: auto;
left: 50%;
/* キャプション帯（padding-bottom: 48px）の上下中央に置く。
中心を帯の半分（24px）に合わせ、自身の高さぶんを translate で戻す */
bottom: 24px;
transform: translate(-50%, 50%);
z-index: 5;
background: none;
box-shadow: none;
padding: 0;
color: #1a1a1a !important;
-webkit-text-fill-color: #1a1a1a !important;
font-size: 15px;
}
/* **黒は ID を含めて宣言する**（利用者の指摘・2026-08-19「ここ文字が白に
なっている」＝白い印画紙に白文字で、🎁だけが見えていた）。
上の `.capturedlist.fp-polaroid .fp-prize-tag`（クラス4つ）は、サイト全体の
動的CSS（text_color=白）が使う「:not() を7つ並べた長いセレクタ＋!important」に
**特異度で負ける**。!important 同士の勝負はセレクタの強さで決まるので、
一覧の入れ物の ID（#pagePhotoList）を足して勝たせる（CLAUDE.md 定石3）。
**-webkit-text-fill-color にも !important を付ける。** color だけ勝っても、
塗りのほうが動的CSSの `!important` に負けると文字は白いままで、
🎁 だけが見えている状態になる（利用者の報告・2026-08-19「文字が消えてる」）。
拡大表示側もセレクタに ID を含むので color は勝っていたが、塗りに
!important が無く、そちらだけ負けていた。 */
body.hs-fp #pagePhotoList .capturedlist.fp-polaroid .fp-prize-tag {
color: #000 !important;
-webkit-text-fill-color: #000 !important;
}
body.hs-fp .capturedlist.fp-polaroid .fp-prize-tag::before,
body.hs-fp #pageDetailsFramed .fp-prize-tag::before {
/* **絵文字は生で書かず、コードポイントで書く。**
CSS の文字コードは HTTP の Content-Type が最優先で、@charset はその次。
サーバーが text/css を charset 無し（や iso-8859-1）で返すと @charset が
効かず、UTF-8 のバイト列が cp1252 として読まれて「ðŸŽ」に化ける
（利用者の報告・2026-08-15）。エスケープなら文字コードに依存しない。
\01F381 = 🎁 / \00A0 = 空白（6桁で書けば終端の空白が要らない）。 */
content: "\01F381\00A0";
}
/* 商品名が入った瞬間のエフェクト。小さく生まれて弾み、金色がひと呼吸
だけ差して落ち着く。scale/opacity は transform と独立したプロパティ
なので、中央合わせの translate（transform）とは干渉しない。 */
@keyframes fp-prize-tag-in {
0% { scale: .4; opacity: 0; }
55% { scale: 1.18; opacity: 1; text-shadow: 0 0 14px rgba(232, 180, 74, .9); }
100% { scale: 1; opacity: 1; text-shadow: none; }
}
.fp-prize-tag-in {
animation: fp-prize-tag-in .55s cubic-bezier(.2, 1.1, .35, 1.1) both;
}
@media (prefers-reduced-motion: reduce) {
.fp-prize-tag-in { animation: none; }
}
/* 拡大表示（詳細モーダル）も同じレイアウト: 印画紙下辺の余白に「🎁 商品名」。
下の @media (min-width:769px) の右上指定（top/right 26px）より
強いセレクタにしてある（.fp-prize-tag まで指定）。 */
body.hs-fp #pageDetailsFramed .fp-trial-tag.fp-prize-tag {
/* 位置は **left:50% + translate(-50%,50%)** のまま。
一度 left/right を 0 起点の箱に変えたが、この要素の包含ブロックは
印画紙（#pageDetailsFramed）ではなく外側なので、左端へ飛び出した
（利用者の報告・2026-08-14）。**包含ブロックを確かめずに
left/right へ切り替えないこと。**
「下にずれる」の元は2行への折り返し。中心を決め打ちしているので、
行が増えたぶんだけ下へはみ出していた。折り返させなければ起きないので、
1行に固定して、長い名前は端を省略する。 */
top: auto;
right: auto;
left: 50%;
bottom: 33px; /* 下帯（66px）の上下中央 */
transform: translate(-50%, 50%);
white-space: nowrap;
max-width: calc(100% - 32px);
overflow: hidden;
text-overflow: ellipsis;
background: none;
box-shadow: none;
padding: 0;
color: #1a1a1a !important;
-webkit-text-fill-color: #1a1a1a !important;
/* スマホでは一覧のキャプション（15px）と同じ大きさのまま。
20px への拡大は広い画面だけ（下の @media）。面がほぼ同じ大きさなのに
字だけ大きいと、一覧と別の画面に見える（利用者の指示）。 */
font-size: 15px;
font-weight: 700;
white-space: nowrap;
z-index: 5;
}
@media (min-width: 769px) {
/* 「プレゼント名が小さい」（2026-08-13）による拡大は広い画面だけ */
body.hs-fp #pageDetailsFramed .fp-trial-tag.fp-prize-tag { font-size: 20px; }
}
/* ---------------- 拡大表示もポラロイドの見え方に揃える ---------------- */
/* 詳細のポラロイド化は **FPモードのときだけ**（お楽しみ動画フォト／ガチャ）。
通常モードへ現像を持ち込んだサイト（body.hs-fp-develop）でも印画紙に
していたが、外した（利用者の指示・2026-08-17
「通常モードの時はポロライドの表示にしない」）。
通常モードへ持ち込んでいるのは**現像の演出**であって、写真の見せ方は
サイト本来のまま（素の写真）にする。
伏せ／現像の演出そのもの（body.hs-fp-develop の他の指定）は残る。 */
body.hs-fp #pageDetails #pageDetailsFramed {
box-sizing: border-box;
/* 一覧のカードと同じ白（利用者の指示・2026-08-18）。 */
background: #fff;
/* 下帯（キャプション）の高さ。**ここが唯一の定義**。
商品名の位置も撮影者表示の位置もこの値から逆算するので、
3か所に 66px を書き写さない（書き写すと片方だけ直ってずれる）。 */
--fp-caption-h: 66px;
/* キャプションは2行ぶん(約39px)あるので、下の余白はそれより広く取る */
padding: 12px 12px var(--fp-caption-h);
border-radius: 2px !important; /* captured.css の 15px を上書き */
box-shadow: 0 4px 16px rgba(0, 0, 0, 0.25);
}
/* 撮影一覧側は #pageDetails:not(.vertical) … に
height:100% !important / object-fit:contain !important を当てている。
そのままだと写真がレターボックスになり、印画紙の左右に無駄な余白が出る。
body クラスを足して詳細度で上回り、幅なりの高さで表示させる。
（hs-fp-develop は通常モードへの現像持ち込み時にJSが付ける同義のクラス） */
body.hs-fp #pageDetails #pageDetailsFramed #pageDetailsFramedImage {
display: block;
box-shadow: 0px 1px 3px rgba(0, 0, 0, 0.3); /* 一覧の写真と同じ薄い影 */
/* **画面に収める**（利用者の報告・2026-08-20「verticalのとき、modalが
画面外に出て操作できなくなる」）。
max-height:none ＋ 幅なりの高さだと、9:16 の写真は枠の幅の1.8倍の高さに
なる。縦のセッションは枠が 90vw まで広がるので、PCでは画面の何倍もの
高さになり、下のボタンまで延々とスクロールすることになっていた。
（背景は overflow-y:auto なので「届かない」ではないが、実質操作できない。）
高さの上限を決めて、幅はそれに合わせる ―― 現像直後の写真と同じ考え方。
引く 240px は、印画紙の下帯とその下のボタンのぶん。 */
width: auto !important;
height: auto !important;
max-width: 100% !important;
max-height: calc(100dvh - 240px) !important;
/* 縮めて全部見せる（切り取らない）。枠は下の fit-content で写真に合わせる。 */
object-fit: contain !important;
border-radius: 0;
}
/* 印画紙は写真の形に合わせて縮む（縦長のときに両脇へ白が余らないように）。 */
body.hs-fp #pageDetails #pageDetailsFramed {
/* Safari は width の fit-content に前置きが要る版がある。無いと
width が auto に倒れ、left/right:0 のぶん**横いっぱいに伸びる**
（利用者の報告・2026-08-20「ダウンロードボタンがこわれてみえる」）。 */
width: -webkit-fit-content;
width: fit-content;
margin-left: auto;
margin-right: auto;
}
@media (max-width: 480px) {
/* スマホはボタンが縦に積まれるので、そのぶん多めに空ける */
body.hs-fp #pageDetails #pageDetailsFramed #pageDetailsFramedImage {
max-height: calc(100dvh - 260px) !important;
}
}
/* 枠の高さは中身なりにする。
撮影一覧側は「画像ごとに表示サイズが変わらないように」と
#pageDetailsFramed 自体へ aspect-ratio:16/9 を当てている。
印画紙は下の余白が広いぶん枠全体の比率が変わるため、これを外さないと
写真が余白へはみ出して下のキャプションに重なる。比率は画像側で持たせる。 */
body.hs-fp #pageDetails #pageDetailsFramed {
aspect-ratio: auto !important;
height: auto !important;
min-height: 0 !important;
/* overflow:hidden は付けない。前後の矢印はこの枠の内側にあり、
left/right のマイナス値で枠の外に出しているため、クリップされて消えてしまう。 */
overflow: visible;
}
/* キャプションは写真の上ではなく、下の印画紙の余白に置く */
/* 写真の中央に重ねていたID表示は出さない。
同じ番号は右下のクレジット「Captured by ◯◯ (12345678)」に入っており、
写真の真ん中に重なるぶん、見せたい部分が隠れてしまうため。 */
body.hs-fp #pageDetails #pageDetailsFramed .display-user-id,
body.hs-fp #zoom .display-user-id,
body.hs-fp-develop #zoom .display-user-id {
display: none !important;
}
/* 撮影者と著作権の表示は、印画紙の下帯ではなく写真の右下に重ねる。
bottom は下帯の高さ(--fp-caption-h)を基準に逆算する。
帯の高さちょうどで写真の下端、それより大きくすると写真の中へ入る。 */
body.hs-fp #pageDetails #pageDetailsFramed .copyright_detailphoto {
left: auto;
right: 20px; /* 左右の余白12px + 写真の内側へ8px */
bottom: calc(var(--fp-caption-h, 66px) + 8px);
top: auto;
height: auto;
display: block;
margin: 0;
font-size: 12px !important;
line-height: 1.5 !important;
text-align: right;
font-weight: 600;
/* 文字の塗りそのものを白に固定する。color だけだと、サイト全体の
動的配色が別の色を当てていた場合に負けることがあるため。 */
color: #fff !important;
-webkit-text-fill-color: #fff !important;
/* 影は輪郭を締める程度にとどめる。3方向に濃く重ねていたので、
文字のまわりが黒く縁取られて重く見えていた。
写真の上でも読めればよいので、真下に1枚だけ薄く落とす。 */
text-shadow: 0 1px 2px rgba(0, 0, 0, .55);
}
/* お楽しみ写真などのバッジは、一覧のカードと同じ位置に置く。
一覧は枠の端から5px（＝写真の角より7px外側）に出ているので、
拡大側も写真の角からの距離が同じになるよう、枠の余白に合わせて逆算する。
スマホは余白12px → 12-7=5px、PCは余白18px → 18-7=11px。 */
body.hs-fp #pageDetails #pageDetailsFramed .top-right-container-detail {
top: 5px !important;
right: 5px !important;
}
/* **印画紙の余白は body.hs-fp（＝ガチャ／フォトの体験）だけ。**
通常モードへ現像の演出だけを持ち込んだサイト（body.hs-fp-develop）は
「ポラロイドの表示にしない」と決めてある（2026-08-17）が、下の2つの
メディアクエリにだけ hs-fp-develop が残っていた。その結果、通常モードの
拡大表示は**白い印画紙にならないまま余白（padding 18px/86px）だけが付き**、
写真の下に用の無い空きが出ていた（利用者の報告・2026-08-22
「表示がばぐってる?」）。余白を決める側と地色を決める側は必ず同じ条件で
持たせること。
/* スマホでは拡大表示も一覧のカードと同じ入れ方に揃える。
拡大側だけ余白と文字が大きいと、同じ印画紙なのに別物に見えてしまう。
（一覧: padding 12/12/48・キャプション left/right 14px・高さ48px・11px） */
@media (max-width: 768px) {
body.hs-fp #pageDetails #pageDetailsFramed {
padding: 12px 12px 48px;
}
body.hs-fp #pageDetails #pageDetailsFramed .copyright_detailphoto {
left: auto;
right: 20px; /* 余白12px + 写真の内側へ8px */
bottom: 56px; /* 下帯48px + 写真の内側へ8px */
height: auto;
font-size: 10px !important;
line-height: 1.5 !important;
}
}
/* PCでは横いっぱいに広がると余白が相対的に細くなり、印画紙に見えなくなる。
最大幅を決めて中央に置き、余白も幅に見合う太さにする。 */
@media (min-width: 769px) {
body.hs-fp #pageDetails #pageDetailsFramed {
max-width: 720px;
margin-left: auto;
margin-right: auto;
padding: 18px 18px 86px;
}
body.hs-fp #pageDetails #pageDetailsFramed .copyright_detailphoto {
left: auto;
right: 28px; /* 余白18px + 写真の内側へ10px */
bottom: 96px; /* 下帯86px + 写真の内側へ10px */
height: auto;
font-size: 13px !important;
}
body.hs-fp #pageDetails #pageDetailsFramed .top-right-container-detail {
top: 11px !important;
right: 11px !important;
}
/* 前後の矢印は #pageDetailsFramed の内側にあり、left/right:-10px だと
80px幅の大半が印画紙に重なる。枠の完全に外へ出す。 */
body.hs-fp #pageDetails #pageDetailsFramed #prevButton {
left: -96px !important;
}
body.hs-fp #pageDetails #pageDetailsFramed #nextButton {
right: -96px !important;
}
}
/* ---------------- 撮影一覧: マスク & 現像演出 ---------------- */
/* 未現像: フィルムのネガのように、うっすらとだけ像が分かる状態。
色を反転させ、コントラストと彩度を落として何が写っているかは読み取れないようにする。
blur はそのままだと画像の外側ににじみ出て印画紙の余白に影のように落ちるため、
clip-path で自分の枠に閉じ込める。 */
.capturedlist.fp-undeveloped .capturedlistImage {
clip-path: inset(0);
filter:
invert(1)
sepia(0.3)
hue-rotate(160deg)
saturate(0.6)
brightness(0.78)
contrast(1.25)
blur(2.2px);
opacity: 0.78;
}
/* ---------------- 現像: プリンターのように上から下へ ---------------- */
/* カバーを上から順に切り落として、下に隠れている写真を出していく。 */
.fp-cover.is-printing {
animation: fp-print-reveal 2600ms linear forwards;
}
@keyframes fp-print-reveal {
from { clip-path: inset(0 0 0 0); }
to { clip-path: inset(100% 0 0 0); }
}
/* 走査線に合わせて上から出てくる、カラーの写真。
未現像のネガの上に重ね、上端から下へ向かって見える範囲を広げる。
カバー(25)より上・走査ヘッド(27)より下に置く。 */
.fp-reveal {
position: absolute;
inset: 0;
z-index: 26;
overflow: hidden;
pointer-events: none;
border-radius: inherit;
/* 初期状態は完全に隠す。押した瞬間に全部見えないようにするため。
削るのは「下」側。inset() の第1引数は上端から削る量なので、
inset(100% 0 0 0) にすると下から生えてきて走査線と逆向きになる。 */
clip-path: inset(0 0 100% 0);
}
/* ポラロイド枠では印画紙の余白を残し、写真面だけを覆う */
.capturedlist.fp-polaroid .fp-reveal {
inset: 12px 12px 48px;
border-radius: 0;
}
.fp-reveal img {
display: block;
width: 100%;
height: 100%;
object-fit: cover;
}
.fp-reveal.is-printing {
animation: fp-print-fill 2600ms linear forwards;
}
/* 走査線と同じく、上から下へ向かって見える範囲を広げる */
@keyframes fp-print-fill {
from { clip-path: inset(0 0 100% 0); }
to { clip-path: inset(0 0 0 0); }
}
/* 走査ヘッドを走らせる領域。写真面に重ねる。 */
.fp-printer {
position: absolute;
inset: 0;
z-index: 27;
overflow: hidden;
pointer-events: none;
}
.capturedlist.fp-polaroid .fp-printer {
inset: 12px 12px 48px;
}
/* 走査ヘッド。粒子そのものは canvas(.fp-particles) が描くので、
ここでは先端の光と、そのにじみだけを受け持つ。 */
.fp-printer-head {
position: absolute;
left: 0;
right: 0;
height: 36%;
animation: fp-print-head 2600ms linear forwards;
}
/* 画像の画素から作った光の粒。走査線の手前に飛び込んでくる。 */
.fp-particles {
position: absolute;
inset: 0;
z-index: 1;
pointer-events: none;
}
/* 先端まわりのにじんだ光。線を太く見せないよう、ごく薄く短く。 */
.fp-printer-head::before {
content: "";
position: absolute;
left: -6%;
right: -6%;
bottom: -5px;
height: 18px;
background: radial-gradient(52% 100% at 50% 100%, rgba(186, 210, 255, 0.26), transparent 72%);
filter: blur(4px);
}
/* 走査線そのもの。1pxの細い線として見せ、グローは最小限にとどめる。 */
.fp-printer-head::after {
content: "";
position: absolute;
left: 0;
right: 0;
bottom: 0;
height: 1px;
background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.7) 12%, rgba(226, 238, 255, 0.85) 50%, rgba(255, 255, 255, 0.7) 88%, transparent);
box-shadow:
0 0 2px rgba(255, 255, 255, 0.5),
0 0 7px rgba(170, 198, 255, 0.3);
opacity: 0.82;
}
/* 帯の「下端」が走査線。カバーの剥がれ位置(0%→100%)と一致させるため、
帯の高さ(36%)ぶん手前から始めて 64% で終える。
（以前は 100% まで動かしていたので、線だけが表示領域より先行していた） */
@keyframes fp-print-head {
from { top: -36%; }
to { top: 64%; }
}
@media (prefers-reduced-motion: reduce) {
.fp-printer-head { animation: none; }
}
/* 現像中はカバーの文言を消す（走査の邪魔になるため） */
.fp-cover.is-printing .fp-cover-label,
.fp-cover.is-printing .fp-cover-sub {
opacity: 0;
transition: opacity 180ms ease;
}
/* 動きを控える設定では走査を出さず、すぐに表示する */
@media (prefers-reduced-motion: reduce) {
.fp-cover.is-printing { animation-duration: 1ms; }
.fp-reveal.is-printing { animation-duration: 1ms; }
.fp-printer { display: none; }
}
/* 未現像カードに重ねるカバー */
.fp-cover {
position: absolute;
inset: 0;
z-index: 25;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 8px;
border-radius: inherit;
cursor: pointer;
color: #fff;
font-family: "M PLUS 2", sans-serif;
text-align: center;
/* 下のネガが透けるよう半透明にする（不透明だと像が完全に隠れてしまう） */
background:
repeating-linear-gradient(135deg, rgba(255,255,255,0.05) 0 10px, rgba(255,255,255,0) 10px 20px),
linear-gradient(160deg, rgba(27, 28, 70, 0.40) 0%, rgba(14, 15, 52, 0.48) 100%);
transition: opacity 700ms ease;
}
/* ポラロイド枠では印画紙の余白を残し、写真面だけを覆う */
.capturedlist.fp-polaroid .fp-cover {
inset: 12px 12px 48px;
border-radius: 0;
}
.fp-cover .fp-cover-label {
display: inline-block;
padding: 6px 18px;
border: 1px solid rgba(255, 255, 255, 0.55);
border-radius: 999px;
font-size: 13px;
font-weight: 700;
letter-spacing: 0.06em;
/* 背景が白のサイトでは、動的配色の文字色(黒系)を継いで読めなくなる。
覆いの上は常に暗い写真なので、白で固定する（塗りごと固定。
JS側でもインラインの !important を入れており、二重の保険）。 */
color: #fff !important;
-webkit-text-fill-color: #fff !important;
}
.fp-cover .fp-cover-sub {
font-size: 10px;
letter-spacing: 0.14em;
color: #fff !important;
-webkit-text-fill-color: #fff !important;
opacity: 0.6;
}
/* 現像枠を使い切ったコマ。押しても開かないので、押せる見た目をやめる。
pointer-events は切らない ―― 切るとカードの拡大表示へクリックが
通り抜けて、未現像の中身が見えてしまう。タップの無効化は
prototype-otanoshimi.js 側（.fp-cover-locked を見て伝播を止める）が行う。 */
.fp-cover.fp-cover-locked {
cursor: default;
}
.fp-cover.fp-cover-locked .fp-cover-label {
border-color: rgba(255, 255, 255, 0.28);
opacity: 0.72;
font-weight: 600;
}
/* ガチャの「商品にする1枚」を選ぶチェックと画面下の受け取りバー
（.fp-pick-* / .fp-pickbar）は、導入した当日に廃止した
（利用者の判断・2026-08-13「複雑になるため」）。
選定は当選ダイアログの「◯◯を購入する」1本。 */
/* 現像中のインジケータ */
.fp-developing-note {
position: absolute;
left: 50%;
bottom: 10px;
transform: translateX(-50%);
z-index: 26;
padding: 3px 12px;
border-radius: 999px;
background: rgba(0, 0, 0, 0.6);
color: #fff;
font-size: 11px;
letter-spacing: 0.06em;
pointer-events: none;
animation: fp-pulse 1.4s ease-in-out infinite;
}
@keyframes fp-pulse {
0%, 100% { opacity: 0.45; }
50% { opacity: 1; }
}
/* ポラロイド枠では、印画紙の白帯にあるキャプションと重ならないよう写真面の中に置く */
.capturedlist.fp-polaroid .fp-developing-note {
bottom: 58px;
}
/* ---------------- お楽しみ動画フォトの見え方 ---------------- */
/* お楽しみ写真（当たり）のカード枠。
.fp-special / .fp-special-item は現像したあとにしか付かないので、
現像前の一覧では当たりが分からないまま（伏せたまま）になる。
※ ここは以前セレクタが壊れていて（閉じ忘れで後続と繋がっていた）
どのカードにも当たっていなかった。 */
.capturedlist.fp-special,
.captured-item.fp-special-item .capturedlist {
outline: 3px solid #e8b44a;
outline-offset: -3px;
box-shadow: 0 0 16px rgba(232, 180, 74, .55);
}
/* ---------------- 濃い背景では同梱の線画素材を白抜きにする ---------------- */
/* step1_bk.png / step3_frame.png は黒の線画なので、濃い背景では沈んで見えない。
反転して白線にする。対象は同梱プリセットだけで、
管理画面からアップロードした写真（.is-preset が付かない）は触らない。 */
body.hs-fp.hs-dark-bg .lp-step-img.is-preset,
body.hs-fp.hs-dark-bg .lp-step3-frame-img {
filter: invert(1);
}
/* ---------------- LP: ステップの写真を小さめに ---------------- */
/* 既定サイズだと写真が主張しすぎるので、少し小さくして周囲に余白を取る。
本番サイトのLPは変えないよう、プロトタイプ稼働中のサイトに限定する。 */
body.hs-fp .lp-steps .lp-step-img {
max-width: 66% !important;
padding: 14px 0 6px;
}
/* スマホは1列が狭く、そこからさらに66%にすると絵が潰れる。列幅なりに出す。 */
@media (max-width: 768px) {
body.hs-fp .lp-steps .lp-step-img {
max-width: 100% !important;
padding: 10px 0 4px;
}
}
body.hs-fp .lp-steps .lp-step2-stack {
max-width: 84px !important;
margin-top: 14px !important;
margin-bottom: 6px !important;
}
/* ステップの見出しの改行位置をPCでもスマホと同じにする。
lp-styles.php は .lp-sp-br をスマホ限定にしているが、
PCで自然に折り返すと語の途中で切れて読みにくいため。 */
body.hs-fp .lp-steps .lp-sp-br {
display: block;
}
/* PCは列幅に余裕があるので、写真を小さくしすぎない。
列の左右 padding が 30px あり、それが実質の上限になっていたので合わせて詰める。 */
@media (min-width: 769px) {
body.hs-fp .lp-steps .lp-step {
padding-left: 14px;
padding-right: 14px;
}
body.hs-fp .lp-steps .lp-step-img {
max-width: 100% !important;
}
/* 写真2枚重ねは面積が大きく見えるので、ステップ1の線画より控えめにする。 */
body.hs-fp .lp-steps .lp-step2-stack {
max-width: 125px !important;
}
}
/* ---------------- PC: LPがヘッダーに食い込むのを防ぐ ---------------- */
/* lp-styles.php はPCで .lp-wrapper に margin-top:-90px を当てている。
これは「ロゴ画像が大きいと本文が下がりすぎる」ための調整なので、
ロゴ画像が未設定のサイトでは詰めすぎてヘッダーと重なる。
本番のレイアウトを変えないよう、プロトタイプ稼働中のサイトに限って打ち消す。 */
@media (min-width: 769px) {
body.hs-fp:not(.hs-has-logo-image) .lp-wrapper {
margin-top: 0;
}
}
/* ---------------- デジタル画像提供のみ: グッズ導線を隠す ---------------- */
/* 実物グッズを提供しないモードなので、スペシャルグッズの購入ボタンは出さない。
（選択ダイアログ内のグッズ項目は JS 側で非表示にしている） */
body.hs-fp-digital #fixedfooter {
display: none !important;
}
/* ---------------- 撮影一覧: 隠す既存UI ---------------- */
/* シャッターを有料で買って撮る体系（お楽しみ動画フォト）では、
撮影データのリセットと写真の削除を出さない。
買ったぶんを消せてしまうと、回数制限も現像枠も意味を失うため。
条件を body.hs-fp に付けているのは、**シャッターが有料のときだけ**の
話だから。このCSSは「通常モードに演出だけ持ち込んだサイト」でも
読み込まれる（hs_fp_presentation_only）。そちらはシャッターが無料なので、
リセットも削除もあってよい。
以前は条件なしで隠していたため、無料のサイトでも消せなくなっていた。 */
body.hs-fp #managePhotos,
body.hs-fp p.reset-notice {
display: none !important;
}
/* 写真の複数選択（購入用チェックボックス）も使わない。
1枚ずつ現像して手に入れる体験なので、まとめ選択の概念が合わない。
買ったシャッターで撮った写真を消させない、という意味でもある。
ラベルは **クラス** で指す。以前は label[name="CapturedImagesFrame"] と
属性で指していたが、label の name はHTMLとして何の働きも持たない
「この CSS のためだけに置かれた属性」だった。そうと知らずに消されると
チェックが表に出てしまう（実際に一度そうなった）。
意味のある目印（class="checkbox_label"）で指しておけば、この形で壊れない。 */
/* **通常モードへの持ち込み（body.hs-fp-develop）はここに入れない**
（利用者の指示・2026-08-22「通常モードで、写真の左上にチェックボックスを
用意して、選択した写真を削除できるように」）。
隠す理由は「買ったシャッターで撮った写真を消させない」ことなので、
シャッターが無料の通常モードには当てはまらない。すぐ上の #managePhotos
（リセット／削除のリンク）が既に body.hs-fp だけを条件にしており、
こちらだけ hs-fp-develop を含んでいたため、**リンクは出ているのに
選ぶ手段が無い**という食い違いになっていた。 */
body.hs-fp .captured-item .checkbox.capturedImages,
body.hs-fp .captured-item label.checkbox_label,
body.hs-fp .captured-item .checkmark,
body.hs-fp #pageDetailsFramed .checkboxDetail,
body.hs-fp #pageDetailsFramed label[for="CapturedImagesFrameDetail"],
/* 「選択した写真を削除」のフッターも出さない。
上のチェックが隠れていれば選べないので普段は出ないが、
隠し忘れが1つでもあると削除の導線だけが生き残ってしまう
（実際に label の name を落としたときにそうなった）。
買ったシャッターで撮った写真を消させない、が守りたいことなので、
選ばせない側と、出さない側の両方で塞いでおく。 */
body.hs-fp #footer_delete {
display: none !important;
}
/* **タブは出す**（利用者の指示・2026-08-22）。
かつては「デジタル画像提供のみのときは切り替え先が無い」として
タブ行を丸ごと隠していた。いまは「購入した写真」タブが
**ダウンロードして受け取った写真**を並べるので、行き先がある。
隠す規則と対だった body.hs-fp-digital #fp-develop-slot の
margin-top:20px も一緒に外した（下の帯エリアの説明を参照）。 */
/* 開始前の「写真集／アクスタは撮影された画像から選ばれます。」。
デジタル画像提供のみのモードでは売る現物が無いので出さない。 */
body.hs-fp-digital #taptostart > p {
display: none !important;
}
/* スマホでは手順を画面いっぱいに使う。
lp-styles.php が .lp-steps と .lp-step の両方に左右の余白を入れていて、
3列に分けると1列あたりが狭くなり、本文がひどく折り返すため。 */
@media (max-width: 768px) {
/* 親の .wrapeer が width:90% なので、100% にしても画面端まで届かない。
手順の帯だけ左右に食い出させて画面いっぱいに使う。 */
body.hs-fp .lp-steps {
/* 端に文字が触れないぶんだけ内側に余白を取る。
content-box のままだと 100vw + 10px になって横スクロールが出る。 */
box-sizing: border-box;
padding-left: 5px;
padding-right: 5px;
width: 100vw;
max-width: none;
margin-left: calc(50% - 50vw);
margin-right: calc(50% - 50vw);
}
/* 各列にも余白を入れて、文字が区切りの点線に触れないようにする。
lp-styles.php は最後の列だけ padding-right:0 にしているので、そこも揃える。 */
body.hs-fp .lp-step,
body.hs-fp .lp-step:last-child {
padding-left: 5px;
padding-right: 5px;
}
}
/* お楽しみフォトの総数。本文より少しだけ目立たせる。 */
body.hs-fp .lp-step-count {
display: inline-block;
margin-top: 4px;
font-weight: 700;
}
/* LPのステップから記号のアイコンを外し、番号だけにする。
番号と絵の二重表示になっていて、意味の足しになっていないため。 */
body.hs-fp .lp-step-icon .material-symbols-outlined {
display: none !important;
}
/* アイコンが消えたぶん、番号だけが左に寄らないよう中央のままにする
（gap は要素が1つになれば効かないので、余白の調整だけ行う）。 */
body.hs-fp .lp-step-icon {
gap: 0;
}
/* デジタル画像提供のみのときは、ヘッダーのスペシャルグッズ（買い物袋）も出さない。
購入できるものが無いので、押しても行き止まりになる。
リンク先は固定ページ Photobook（/captured-photobook/）。 */
body.hs-fp-digital #header li:has(> a[href*="photobook"]) {
display: none !important;
}
/* :has() が使えない環境向けの保険。リンク自体を消して枠だけ残さないようにする。 */
body.hs-fp-digital #header a[href*="photobook"] {
display: none !important;
}
/* お問い合わせの一文。_photo-header-styles.php が座布団（背景と余白）を
付けているが、タブが無くなると見出しの直下に浮いて見えるため地の色に戻す。
向こうが !important なので、こちらも同じ強さで上書きする。 */
body.hs-fp .notice {
background: transparent !important;
padding: 0 !important;
border-radius: 0 !important;
}
/* 見出しとお問い合わせを近づける */
body.hs-fp h3.head {
margin-bottom: 10px !important;
}
body.hs-fp .head {
margin-bottom: 10px !important;
}
/* お楽しみ動画フォト（デジタル画像提供のみ）では、拡大表示のアクションを
ダウンロードだけにする（グッズ購入と商品サンプルは出さない）。
グッズ提供モード(photo_goods)や通常モードでは出る。 */
body.hs-fp-digital #purchase_goodsController a[onclick*="openGoodsSelection"],
body.hs-fp-digital #purchase_goodsController a[onclick*="openGoodsSample"] {
display: none !important;
}
/* 登録・ログインのボタン。
テーマの動的配色が a 要素すべてに color:#fff !important を当てるため、
副ボタン（）が薄いグレー地に白文字になって読めなくなる。
濃い背景でも見える配色に置き換える（モーダルのボタンと同じ考え方）。 */
/* 主ボタンはオレンジの塗り。影は付けない。
既存CTAの #ff8400 は白文字とのコントラストが2.46しかないので、
同系で少し深い #ea580c にする（白文字3.56・背景の紺4.09・入力欄の白3.56）。
文字は19pxの太字なので、大きい文字の基準(3.0)を満たす。 */
body.hs-fp .hs-auth-button {
background: #ea580c !important;
color: #fff !important;
border: 0 !important;
box-shadow: none !important;
}
body.hs-fp .hs-auth-button:hover {
background: #d24d0a !important;
}
body.hs-fp .hs-auth-button--secondary {
background: transparent !important;
color: #fff !important;
border: 1px solid rgba(255, 255, 255, 0.6) !important;
box-shadow: none !important;
}
body.hs-fp .hs-auth-button--secondary:hover {
background: rgba(255, 255, 255, 0.12) !important;
}
/* **明るい背景のサイトでは塗りの白にする**（利用者の指示・2026-08-18）。
透明＋白い細枠は、地色が明るいと枠が消えてボタンに見えない。 */
body.hs-fp:not(.hs-dark-bg) .hs-auth-button--secondary {
background: #fff !important;
color: #1a1a1a !important;
-webkit-text-fill-color: #1a1a1a !important;
border: 1px solid rgba(0, 0, 0, .16) !important;
}
body.hs-fp:not(.hs-dark-bg) .hs-auth-button--secondary:hover {
background: #f1f1f1 !important;
}
/* 2つのボタンは対になるものなので、間隔を詰めて高さを揃える。