/*
 * /captured/ ページ固有のCSS ―― **ページ内 <style> から出したもの**。
 *
 * 同じ見た目の持ち主が4層あった（利用者の指摘・2026-08-20
 * 「同じ見た目に、持ち主が4層いる」）。
 *
 *   1. 共有CSS（style.css / captured_purchased.css / captured.css）
 *   2. サイト全体の自由CSS（general_style_css・DBに入っている）
 *   3. ページ内の <style>   ← ここに大量にあった
 *   4. 要素の style 属性
 *
 * 3 が一番の問題だった。**同じ強さなら後に書いた方が勝つ**ので、
 * ページ内 <style> は共有CSSに黙って勝つ。しかも grep でも
 * ブラウザの開発者ツールでも「どのファイルの何行目」が出ないため、
 * 保存ボタン（2026-08-20）のように「直したのに直らない」が繰り返し起きた。
 *
 * ここへ移したぶんは**見た目を1ミリも変えていない**。読み込む位置を
 * 自由CSS（2）の直後 ―― もとの <style> と同じ場所 ―― にしてあるので、
 * 勝ち負けの関係はそのまま。変わったのは「どこに書いてあるか分かる」ことだけ。
 * !important も当時のまま残してある（外すのは、勝たせたい相手を
 * 1つずつ確かめてからにする）。
 *
 * **新しい見た目をページ内 <style> に足さないこと。** ここか、
 * React の部品（自前のクラス名を持つので、そもそも4層の外にいる）に置く。
 */

/* 写真上のウォーターマーク(Captured by … / © …)は白で表示する。
   詳細(.copyright_detailphoto)・リスト/ズーム(.copyright)の双方を対象にし、
   サイトのカスタムCSSに詳細度で負けないようID付き指定も併用する。 */
.copyright_detailphoto, .copyright,
#pageDetails .copyright_detailphoto, #zoom .copyright, .capturedlist .copyright { color:#fff !important; }
/* 商品選択モーダルの枠線が general_style_css により黒くなるのを打ち消し、薄いグレー/選択時オレンジに */
.goods-select-item{ border-color:#e6e6e6 !important; }
.goods-select-item.selected{ border-color:#ff9900 !important; }
/* PC: 詳細写真の表示サイズをほぼ揃えつつ、上下のレターボックス（余白）を作らない。
   固定比の枠に収めると横長写真で上下に余白が出るため、写真は本来の縦横比のままにし、
   最大幅(860px)＋最大高さ(72vh)で上限だけを設ける。同一セッションは同比率のため大きさも揃う。 */
@media screen and (min-width:481px){
  /* PCでは写真の縦横比に依らず「一定サイズの枠」に収め、画像ごとに表示サイズが変わらないようにする。
     横向きセッションの枠を固定比(16:9)にして object-fit:contain で内側に収める。
     同一セッションの通常写真は16:9のため余白は出ず、お楽しみ写真など比率が異なるものだけ
     枠内に収まる（枠サイズ自体は常に一定）。 */
  #pageDetails:not(.vertical) #pageDetailsFramed{
    width: min(860px, 92vw);
    max-width: 860px;
    aspect-ratio: 16 / 9;
    height: auto;
    margin-left: auto;
    margin-right: auto;
  }
  #pageDetails:not(.vertical) #pageDetailsFramed #pageDetailsFramedImage{
    width: 100% !important;
    height: 100% !important;
    max-width: none !important;
    max-height: none !important;
    object-fit: contain !important;
    margin: 0 !important;
  }
}

/* 高解像度画像の読み込み中スピナー。低解像度を表示しつつ中央で回転し、
   高解像度の読み込み完了でスムースに切り替える（JS が display を制御）。 */
.hs-img-spinner{
  position: absolute;
  top: 50%;
  left: 50%;
  width: 48px;
  height: 48px;
  margin: -24px 0 0 -24px;
  border: 4px solid rgba(255,255,255,0.35);
  border-top-color: #fff;
  border-radius: 50%;
  box-shadow: 0 0 8px rgba(0,0,0,0.45);
  animation: hs-img-spin 0.8s linear infinite;
  z-index: 120;
  pointer-events: none;
  display: none;
}
@keyframes hs-img-spin{ to { transform: rotate(360deg); } }
/* 高解像度へ差し替わるまで、低解像度の拡大ボケを少し和らげる。 */
#pageDetailsFramedImage.hs-img-upscaling,
#zoomImage.hs-img-upscaling{ filter: blur(0.4px); }

/* ---- ギフト帯（商品ガチャの残数）。もとは一覧の直前にあった <style> ---- */

/* 帯そのものの幅を % で決めると、親の幅しだいで端に寄ってしまう。
   外側に左右の余白を持たせて、どの親の中でも必ず余白が残るようにする
   （TOPのシャッターバーと同じ見え方にそろえる）。 */
.hs-gift-bar-wrap{
  box-sizing:border-box;
  width:100%; padding:0 16px;
  /* 帯エリアの縦の間隔は「下だけ 14px」でそろえる
     （利用者の指示・2026-08-15。prototype-otanoshimi.css の同節と対）。 */
  margin:0 0 14px;
}

/* ---- 帯エリアは上端に留まる（利用者の指示・2026-08-21）----
   「この表示が画面から切れる時、sticky に追従するように」「他もこの要素全て」。

   対象は帯エリアの2つ:
     #fp-develop-slot  … シャッター／現像可能数の帯（中身は入れ替わる）
     .hs-gift-bar-wrap … 🎁 商品を N つ選定いただけます
   どちらも**同時には出ない**（applyDevelopCount が入れ替える）ので、
   同じ位置（top:6px）に留めても重ならない。

   JS（TOPのシャッター帯の watchShutterBarFloat）ではなく position:sticky で
   行う ―― こちらは一覧の中に居続けるだけなので、流れから外れる瞬間が無く、
   下敷き（spacer）も要らない。留まる範囲は親（#pagePhoto）の高さ＝
   一覧を読んでいるあいだずっと。
   器がスクロールするTOP同梱（#fp-captured-spa）でも同じように効く
   （閉じるボタンが既に position:sticky で動いているのと同じ理屈）。

   6px は上端との隙間。0 にすると画面の縁に貼り付いて窮屈に見える。 */
#fp-develop-slot,
.hs-gift-bar-wrap{
  position:sticky;
  top:6px;
  /* 写真カードより手前。モーダル類（2147482900〜）よりはずっと後ろ。 */
  z-index:40;
}
.hs-gift-bar{
  box-sizing:border-box;
  /* 2行組（数の行＋添え書き）にしたので縦積み。
     gap は行間なので、1行目の中の間隔は .hs-gift-bar-main が持つ。 */
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:6px;
  width:100%; max-width:560px; margin:0 auto; padding:12px 18px;
  text-align:center;
  /* 見た目は現像可能数の帯と同じ枠にそろえる（利用者の指示・2026-08-14） */
  border:1px solid rgba(255,255,255,0.2);
  border-radius:10px;
  background:rgba(255,255,255,0.06);
  /* 上端に留まっているあいだ、背後を写真が通る。ぼかしは常に掛けておく
     ―― 流れの中（背景は一色）では掛けても見え方が変わらないので、
     状態で切り替えると留まった瞬間に色が動いてしまう。 */
  -webkit-backdrop-filter:blur(10px);
  backdrop-filter:blur(10px);
  /* 幕の濃さだけは留まったときに足す（下の .is-stuck）。
     常に濃くすると、流れの中でも帯だけ暗く沈んで見える。 */
  transition:background-color .18s ease, box-shadow .18s ease;
  font-family:"M PLUS 2",sans-serif;
  /* サイト全体の動的CSSに負けないよう、文字サイズもここで固定する */
  font-size:13px !important;
  color:#f2c14e !important; -webkit-text-fill-color:#f2c14e;
}
/* 上端に留まっているあいだ（印は captured-page.js の hsWatchStickyBands）。
   背後を写真が通るので、暗い幕と影を足して文字を浮かせる。
   ぼかしは常時（流れの中では背景が一色なので見え方が変わらない）。 */
#fp-develop-bar{
  -webkit-backdrop-filter:blur(10px);
  backdrop-filter:blur(10px);
  transition:background-color .18s ease, box-shadow .18s ease;
}
.hs-gift-bar-wrap.is-stuck .hs-gift-bar,
#fp-develop-slot.is-stuck #fp-develop-bar{
  background:rgba(0,0,0,0.42) !important;
  box-shadow:0 6px 18px rgba(0,0,0,0.28);
}

/* **留まっている枠の透明な部分で、指を受け止めない。**
   入れ物は画面いっぱいの幅で、中の帯は中央の 560px ぶんだけ。
   留まっているあいだ入れ物は写真の上に重なるので、そのままだと
   左右の余白（何も描かれていない所）をタップしても写真に届かない。
   受けるのは帯そのものだけにする。 */
#fp-develop-slot.is-stuck,
.hs-gift-bar-wrap.is-stuck{ pointer-events:none; }
#fp-develop-slot.is-stuck #fp-develop-bar,
.hs-gift-bar-wrap.is-stuck .hs-gift-bar{ pointer-events:auto; }

.hs-gift-bar b{
  /* 数字は現像可能数の帯（.fp-dev-count b）と**同じ指定**にそろえる
     （利用者の指摘・2026-08-14「数字のフォントにぶれがある」）。
     22px / 700 / #ffe14d / line-height:1。並んで出る帯どうしで
     数字の顔が違うと、別の種類の数に見える。 */
  color:#ffe14d !important; -webkit-text-fill-color:#ffe14d;
  /* 数字だけ別の書体になっていたので、帯と同じ書体を必ず継がせる
     （サイト全体の動的CSSが b/strong に別の書体を当てているため）。
     固定名ではなく inherit にして、読み込み状況によらずラベルと必ずそろえる。 */
  font-family:inherit !important;
  font-size:22px !important; font-weight:700; line-height:1; display:inline-block; margin:0 2px;
}
.hs-gift-bar .hs-gift-bar-icon{
  font-size:15px !important; line-height:1; -webkit-text-fill-color:initial;
}
/* 1行目（絵文字＋文＋数字）。行の中の間隔はここが持つ。
   line-height:1 にして、22pxの数字が作る行ボックスの余りで
   上下の見た目の余白がずれないようにする（矩形内の文字は上下均等）。 */
.hs-gift-bar .hs-gift-bar-main{
  display:flex; align-items:center; justify-content:center; gap:6px;
  line-height:1;
  /* **この行はまるごと太字**（利用者の指示・2026-08-21「商品を〜の列は
     全てボールド」）。以前は数字だけが太く、前後の文だけ細かったため、
     数字が浮いて1つの文に見えなかった。 */
  font-weight:700;
}
/* 2行目の添え書き。1行目より一段落ち着かせて、主役を数の行に残す。 */
.hs-gift-bar .hs-gift-bar-sub{
  display:block;
  font-size:11px !important; font-weight:400;
  line-height:1.5;
  color:rgba(255,255,255,.78) !important; -webkit-text-fill-color:rgba(255,255,255,.78);
}
@media (max-width:768px){
  .hs-gift-bar{ font-size:11px !important; }
  .hs-gift-bar .hs-gift-bar-sub{ font-size:10px !important; }
}

/* 添え書きの読点での改行は**スマホだけ**（利用者の指示・2026-08-21）。
   PCでは1行に収まるので、改行すると逆に間延びする。
   マークアップ側（hs_fp_gift_bar_html）が <br class="hs-band-sp-br"> を置く。 */
.hs-band-sp-br{ display:none; }
@media (max-width:768px){
  .hs-band-sp-br{ display:inline; }
}

/* **帯エリアの2つは同じ高さにそろえる**（利用者の指示・2026-08-21
   「高さを他に揃えてください」）。中身の行数が違っても（シャッターの帯は
   見出し＋2行、ギフト帯は見出し＋1〜2行）、入れ替わったときに
   箱の大きさが動かないようにする。
   下限だけを決め、内側は中央に置く ―― 行が増えたぶんは今までどおり伸びる。

   **ガチャ（グッズ提供）のときだけ**（利用者の指摘・2026-08-21
   「フォトモードのとき余白がおかしい、ここは前のままにしたい」）。
   フォトモードの帯は「ダウンロード可能数 のこり N 枚」の1行だけで、
   入れ替わる相手もいない。下限を持たせると、その1行の下に
   使われない余白が残る。 */
body.hs-fp-goods #fp-develop-bar,
.hs-gift-bar{
  min-height:90px;
  justify-content:center;
  align-content:center;
}
@media (max-width:768px){
  body.hs-fp-goods #fp-develop-bar,
  .hs-gift-bar{ min-height:84px; }
}

/* 帯を出さないときは、置き場の余白ごと畳む（印は applyDevelopCount）。
   高さ0の置き場が 14px の下余白を持ち続け、タブとギフト帯のあいだに
   誰も使っていない一段ぶんが残っていた（利用者の指摘・2026-08-21）。 */
#fp-develop-slot.is-collapsed{
  margin:0 !important;
  gap:0;
}
/* 一覧側の上の余白(30px)と帯の余白が重なって、間が空きすぎていた。
   帯を出しているときだけ、少しだけ詰める（10pxまで寄せると窮屈だった）。 */
/* 帯を出しているときの一覧側の上マージン。帯の下マージンで空けるので
   ここは足さない（両方で空けると離れすぎる）。 */
.hs-gift-bar-wrap + #pagePhotoList #capturedlists{ margin-top:0; }

/* ---- タブ行の下 ----
   帯エリアと同じ 14px にそろえる（このページだけ）。
   「上は誰も持たず、各要素が下だけを持つ」という規則の起点。 */
p.button-links{ margin-bottom:14px !important; }

/* ---- 一覧・詳細まわり（もとは同じページ内の2つめの <style>） ----
   画像のパスは**このファイルからの相対**。以前は get_template_directory_uri() で
   絶対URLを組んでいたが、CSSの url() はそのCSSファイルの位置から解く決まりなので、
   PHPに頼らなくてよい。 */

ul#capturedlists li .nocopy:after,
ul#capturedlistsSelected li .nocopy:after {
  background-image: url("../images/nocopy.svg");
}
.bg:after{
  background-image: url("../images/bg.png");
}
label.checkbox_label {
  background-image: url("../images/check_off.svg");
  background-size: 100%;
}
input[type=checkbox]:checked + label.checkbox_label{
  background-image: url("../images/check_on.svg");
  background-size: 100%;
}

#pageDetailsFramed,
.capturedlist{
  background: #0000002e;
  border-radius: 10px !important;
  border: 1px solid rgba(255, 255, 255, 0.1);
  font-size: 0;
  overflow: hidden;
}
.capturedlistImage{
  padding-top: 0px;
  /* img はインライン既定だとベースライン下に余白が出るため block 化（サムネイル下の隙間を解消） */
  display: block;
}
/* 一覧画像の読み込み完了時にフェードイン */
.captured-fade{
  opacity: 0;
  transition: opacity 0.45s ease;
}
.captured-fade.is-loaded{
  opacity: 1;
}
/* ---- 帯と一覧を、確定するまで伏せる（利用者の報告・2026-08-15） ----
   **要素ごとに opacity を書くのはやめた。** 伏せるスクリプトは
   #fp-develop-slot の直後にあり、ギフト帯・シャッターの枠・写真一覧は
   その**あと**に出力される。解析時に querySelector が null を返すので
   そこだけ伏さらず、リロードのたびにギフト帯だけが一瞬出ていた。

   印を <html> に付けてCSSで伏せれば、**まだ出力されていない要素にも
   効く**（あとから現れた時点で既に伏さっている）。
   外すのは hsShowBands（状態が揃ったとき／保険の2.5秒後）。
   JSが動かない環境では印が付かないので、消えっぱなしにはならない。 */
/* 同梱（TOPの #fp-captured-spa）では印を <html> ではなく**入れ物**に付ける。
   <html> に付けると、TOP側の帯（シャッター残数の告知など）まで
   同じ選択子で伏さり、TOPを開いた直後の2.5秒だけ帯が消える。
   伏せたいのは同梱した一覧の中だけ。 */
html.hs-fp-bandwait #fp-develop-slot,
html.hs-fp-bandwait .hs-gift-bar-wrap,
html.hs-fp-bandwait #fp-shutter-left-note,
html.hs-fp-bandwait #pagePhotoList,
#fp-captured-spa.hs-fp-bandwait #fp-develop-slot,
#fp-captured-spa.hs-fp-bandwait .hs-gift-bar-wrap,
#fp-captured-spa.hs-fp-bandwait #fp-shutter-left-note,
#fp-captured-spa.hs-fp-bandwait #pagePhotoList { opacity: 0; }
#fp-develop-slot,
.hs-gift-bar-wrap,
#fp-shutter-left-note,
#pagePhotoList { transition: opacity .22s ease; }

/* ---- 一覧の初回表示（利用者の指示・2026-08-15） ----
   状態が揃うまでカードを伏せ（html.hs-fp-listwait・付け外しは
   hsShowBands のスクリプトが持つ）、揃ったら**上から順に**せり上げる。
   アニメーションは backwards: 遅延中は最初のコマ（透明）で待ち、
   終わったら**通常のスタイルに戻る** ―― both で最終コマに固定すると、
   ホバーの transform が一生効かなくなる。
   並べ替え（sortFrames の FLIP）は2秒後なので、最後のカードの
   せり上がり（約1.1秒）とは重ならない。 */
/* 見せどきの合図（.hs-cards-in）は React（captured-list.tsx）が
   状態の settled と同じ描画で付ける。合図が無い間は伏せる。
   以前は html への印＋インラインスクリプトの合図で二段構えにしていたが、
   部品が多く順序の穴が塞ぎきれなかった（利用者の報告・2026-08-15
   「直っていない」）。判定と描画を同じ場所にした。 */
#capturedlists:not(.hs-cards-in) .captured-item{ opacity: 0; }
#capturedlists.hs-cards-in .captured-item{
  animation: hsCardIn .42s cubic-bezier(.2, .8, .3, 1) backwards;
}
#capturedlists.hs-cards-in .captured-item:nth-child(1){ animation-delay: 0ms; }
#capturedlists.hs-cards-in .captured-item:nth-child(2){ animation-delay: 55ms; }
#capturedlists.hs-cards-in .captured-item:nth-child(3){ animation-delay: 110ms; }
#capturedlists.hs-cards-in .captured-item:nth-child(4){ animation-delay: 165ms; }
#capturedlists.hs-cards-in .captured-item:nth-child(5){ animation-delay: 220ms; }
#capturedlists.hs-cards-in .captured-item:nth-child(6){ animation-delay: 275ms; }
#capturedlists.hs-cards-in .captured-item:nth-child(7){ animation-delay: 330ms; }
#capturedlists.hs-cards-in .captured-item:nth-child(8){ animation-delay: 385ms; }
#capturedlists.hs-cards-in .captured-item:nth-child(9){ animation-delay: 440ms; }
#capturedlists.hs-cards-in .captured-item:nth-child(10){ animation-delay: 495ms; }
#capturedlists.hs-cards-in .captured-item:nth-child(11){ animation-delay: 550ms; }
#capturedlists.hs-cards-in .captured-item:nth-child(12){ animation-delay: 605ms; }
/* 13枚目以降は同じ遅延でまとめて出す。行が深くなるほど待たせても
   「出てこない」に見えるだけ（選べる商品の行と同じ考え方） */
#capturedlists.hs-cards-in .captured-item:nth-child(n+13){ animation-delay: 660ms; }
@keyframes hsCardIn{
  from{ opacity: 0; transform: translateY(12px); }
  to  { opacity: 1; transform: none; }
}
@media (prefers-reduced-motion: reduce){
  #capturedlists.hs-cards-in .captured-item{ animation: none; }
}
.display-user-id{
  padding-top: 30px;
}

.layout{
  width: 90%;
}
#pageDetails.horizontal .layout{
    width: 90%;
}

@media only screen and (max-width: 480px) {
  .layout{
    width: 90%;
  }
  ul#capturedlists, ul#capturedlistsSelected {
    width: 90%;
  }
}

#pageDetailsFramedButtonCheckout_P2[data-href="disabled"]{
  display: none !important;
}


/* コンテナ(#zoomContainer)のみを対象にする。以前は "#zoom div" で #zoom 内の
   全 div（ID表示 .display-user-id 等）に比率/幅高さが当たり、縦表示時に ID が
   細い縦箱になって左にずれていた。直接の子コンテナに限定して overlay を巻き込まない。 */
#zoom > #zoomContainer{
  width:100%;
  height: auto;
  aspect-ratio: 3840 / 2160;
}
#zoom.vertical > #zoomContainer{
  width:auto;
  height: 100%;
  aspect-ratio: 2160 / 3840;
}

#purchase_goodsController .button a, #fixedfooter .button a{
  line-height: 1.1;
  padding: 0px 10px;
}
/* 詳細のボタン（ダウンロード/グッズ購入）は横幅を揃える。
   商品選択モーダル内の .buttons を巻き込まないよう直下だけに当てる */
#purchase_goodsController > .buttons > .button{
  width: 300px;
  max-width: 88vw;
}
#purchase_goodsController > .buttons > .button a.footerButton{
  width: 100%;
  box-sizing: border-box;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.buttons{
  gap: 0;
}
/*
.footerButton {
  font-size: 14px;
  height: 40px;
}
*/
/*
#pageDetails.horizontal #pageDetailsFramed
 {
  width: 50vw;
 }
*/

/* 詳細モーダルを開いている間、**背後の一覧**のチェックは隠す。

   限定が要る理由: `.checkbox_label` は一覧のコマだけでなく、
   詳細モーダル自身の選択チェック（#CapturedImagesFrameDetail の label）
   にも付いている。body 直下から無条件に消すと、詳細モーダルの
   チェックまで巻き添えで消えて、**詳細から1コマを選ぶ操作が
   できなくなる**（入力は captured.css:439 で常に display:none、
   押せるのは label だけなので、label が消えると手が無い）。
   一覧のカード（.captured-item）の中だけに絞る。

   お楽しみ動画フォト/ガチャでは、詳細のチェックを出さないのが正しい。
   それは prototype-otanoshimi.css:713-720 の body.hs-fp / hs-fp-develop
   が別途受け持っているので、ここでは何もしない。 */
body.modal-open .captured-item .checkbox_label,
body.modal-open .captured-item .checkmark {
  display: none !important;
}

/* Button Links Layout */
.button-links {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 10px;
  text-align: center;
  justify-content: center;
}
@media screen and (min-width: 481px) {
  .button-links {
    flex-direction: row;
    justify-content: center;
  }
  /* Force independent layout for footer buttons on PC */
  .footer-buttons-pc-horizontal {
      display: grid !important;
      /* 列数は管理画面の設定（special_goods_columns）。既定は3列で、
         2列のときだけページ側が --hs-goods-cols を上書きする。 */
      grid-template-columns: repeat(var(--hs-goods-cols, 3), 1fr) !important;
      gap: 10px !important;
      justify-content: center !important;
      width: 100% !important;
      max-width: 1000px !important;
  }
  .footer-buttons-pc-horizontal .button {
      width: 100% !important;
      min-width: 0 !important; /* Allow grid to control width */
      flex: auto !important;
  }
}

/* Prevent Image Drag/Save */
#pageDetailsFramedImage, #zoomImage {
    user-select: none;
    -webkit-user-drag: none;
    -webkit-touch-callout: none;
    pointer-events: auto;
}
/* 詳細表示のスムース遷移（写真切替時に opacity フェード） */
#pageDetailsFramedImage { transition: opacity 0.25s ease; }

/* 詳細表示を開く瞬間に縦スクロールバーの有無が変わると、中央寄せの要素（撮影した写真の
   タブバー等）がスクロールバー幅ぶん左右にずれ、View Transitions でその差分が動いて
   「変な風に動く」ように見える。スクロールバー領域を常に確保してレイアウトのガタつきを無くす。 */
html { scrollbar-gutter: stable; }

/* サムネイル⇄詳細モーダルのモーフィング遷移（View Transitions API・対応ブラウザのみ）。
   共有 view-transition-name "photo-morph" を付与した両画像の間を、位置・サイズ・
   クロスフェードで滑らかに繋ぐ。非対応/reduced-motion 時は通常表示にフォールバック。 */
::view-transition-group(photo-morph) {
    animation-duration: 0.38s;
    animation-timing-function: cubic-bezier(0.2, 0, 0, 1);
}
::view-transition-image-pair(photo-morph) {
    isolation: auto;
}
/* モーフィング中、移動先(ズーム先/詳細先)に旧画像が薄く重なって「影(ゴースト)」のように
   先行表示されるのを防ぐ。旧画像(詳細の低解像度プレビュー等)を即座に消し、新画像を最初から
   不透明にして、位置・サイズの変形(グループ)だけを滑らかに見せる。二重像が出なくなる。 */
html.hs-morphing::view-transition-old(photo-morph) { animation: none; opacity: 0; }
html.hs-morphing::view-transition-new(photo-morph) { animation: none; opacity: 1; }
/* ID表示も写真と同じタイミングで位置・サイズをモーフィングさせる。 */
::view-transition-group(id-morph) {
    animation-duration: 0.38s;
    animation-timing-function: cubic-bezier(0.2, 0, 0, 1);
}
/* モーフィング中は枠の影を一時的に消す。影は枠コンテナ(#pageDetailsFramed)に付いており
   画像(morph対象)とは別タイミング(root側)で動くため、影だけが先行して見えるのを防ぐ。 */
html.hs-morphing #pageDetailsFramed { box-shadow: none !important; }