.wrapeer{
    text-align:left;
    width: 90%;
    max-width: 650px;
    margin: 0 auto;
  }
  ul#sessionList{
    margin: 0 0 20px;
    padding: 0;
    list-style-type: none;
  }
  .post-title a {
    text-decoration: none;
  }
  .post-title a:hover {
    text-decoration: underline;
  }

  .list-session h3{
    color: #fff;
    margin: 5px 0;
    width: 100%;
    text-align:center;
    text-shadow: 0px 1px 3px rgba(0,0,0,0.3);
  }

  .list-session img{
    width: 100%;
  }

  .list-session{
    position:relative;
    margin-bottom:14px;
    height: 370px;
    border-radius: var(--hs-radius-surface, 16px);
    overflow: hidden;
    background: #888;
    background-size: 100%;
  }
  /* ---- カードの手ざわり（利用者の指示・2026-08-23
     「hoverの位置によってわずかに傾け、背景画像は僅かにズーム／
      マウスカーソルの位置に合わせて背景画像を僅かに移動させる」）----

     **傾きと背景の寄せはJSが変数に入れる**（assets/js/top-session-cards.js）。
     組み立てはここ1本 ―― 座標を transform ごとJSに書かせると、
     大きさ（scale）や角丸のような見た目の指定がJSとCSSに分かれる。

       --card-rx / --card-ry … 傾き（カーソルの位置から）
       --card-scale          … 触った/押したときの大きさ（従来どおり）
       --card-bg-x / -y      … 背景の寄せ
       --card-zoom           … 背景の拡大

     `transition: all` はやめた ―― 背景の寄せまで補間されると、
     カーソルに遅れて付いてくる（追従が重く見える）。 */
  /* **拡大の倍率を「数」として登録する**（利用者の指摘・2026-08-23
     「じわじわとゆっくりにしてほしい／急に切り替わっている」）。

     素の変数（--card-zoom）はただの文字列なので、値が変わった瞬間に
     置き換わる。background-size 側に時間を指定しても、**calc の中身が
     飛んだあと**を追いかけるだけで、跳ねて見えていた。
     @property で型（数）を持たせると、変数そのものが補間される。
     読めないブラウザのために background-size にも同じ時間を残してある。 */
  @property --card-zoom {
    syntax: '<number>';
    inherits: false;
    initial-value: 1;
  }
  /* **寄せ（背景の位置）も同じ理由で型を持たせる。**（利用者の指摘・2026-08-23
     「まだ急に変わってしまっています」）
     拡大は補間できていたが、寄せは `center` → `51.2%` と**その場で飛んで**
     いた。触れた瞬間に絵がずれるので、そこが「急に変わった」に見えていた。
     数（%）として登録し、拡大と同じ時間で追わせる ―― カーソルには
     わずかに遅れて付いてくるが、そのほうがなめらかに見える。 */
  @property --card-bg-x {
    syntax: '<percentage>';
    inherits: false;
    initial-value: 50%;
  }
  @property --card-bg-y {
    syntax: '<percentage>';
    inherits: false;
    initial-value: 50%;
  }

  .list-session{
          --card-rx: 0deg;
          --card-ry: 0deg;
          --card-scale: 1;
          /* 既定は 50%（center と同じ位置）。**`center` のままにしない** ――
             登録した型（%）に合わないので、そこだけ補間されなくなる。 */
          --card-bg-x: 50%;
          --card-bg-y: 50%;
          --card-zoom: 1;
          transform: perspective(900px)
                     rotateX(var(--card-rx)) rotateY(var(--card-ry))
                     scale(var(--card-scale));
          /* **傾き・拡大・寄せの進み方は JS が毎コマ持つ**（top-session-cards.js）。
             transition に任せると、サイト全体の自由CSS（general_style_css）が
             `.list-session` の transition を上書きしている環境や、@property を
             解さないブラウザで**一段で切り替わる**（利用者の指摘・2026-08-23）。

             ここに残す transition は **押したときの縮み（:active の
             --card-scale）**のためのもの。0.1秒（利用者の指示・2026-08-23
             「activeのときもeaseの0.1secでかわるように」）。
             JSが毎コマ書く傾きにも掛かるが、0.1秒なので**わずかにならす**
             だけで、遅れとしては見えない。 */
          transition: transform .1s ease;
  }

  .list-session:hover{
          --card-scale: 1.01;
  }
  .list-session:active{
          --card-scale: 0.99;
  }
  /* 動きを減らす設定の端末では傾けない・ズームしない（大きさの変化は従来どおり）。 */
  @media (prefers-reduced-motion: reduce) {
    .list-session{
      --card-rx: 0deg !important;
      --card-ry: 0deg !important;
      --card-zoom: 1 !important;
      --card-bg-x: 50% !important;
      --card-bg-y: 50% !important;
    }
  }
  .description{
    width:100%;
    position:absolute; bottom:10px; color:#fff;
    text-align:center;
  }
  .description h3{
    color: #fff;
  }
  .description p{
    padding: 0;
    margin: 0;
  }
  #backdrop{
  position:fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0,0,0,0.9);
  display: flex;
  justify-content:center;
  align-items: center;
  cursor: pointer;
	backdrop-filter: blur(10px);
  }
  #pageDetailsFramedImage{
  position: relative;
  width: 100%;
  max-width: 800px;
  width: calc((100vh - 80px) * 1.78);
  border-radius: 15px;
  overflow: hidden;
  margin: 0px auto;
  box-shadow: 0px 3px 9px rgba(0, 0, 0, 0.3);
  }

#pageDetailsFramedButtonCheckout{
  top: 75%;
  left: calc(50% - 200px);
  width: 40%;
  text-decoration: none; font-family: times; background-color: #fff; text-align:center; margin:0px auto; 
  display:block; max-width: 400px; height: 50px; border-radius:50px; line-height: 50px;
}
@media only screen and (max-width: 480px) {
  #pageDetailsFramedButtonCheckout{
    top: 60%;
    left: 15%;
    width: 70%;
  }
}
a{
  cursor:pointer;
}

span.english{
  font-family: "Oswald", "Noto Sans JP", sans-serif;
}
.notice_end {
  /* 罫線は文字と同じ色にする。

     以前は #000 固定で、濃い背景のサイトでは枠が沈んで見えていなかった。
     かといって #fff 固定にすると、背景が明るいサイトで今度は見えなくなる。
     currentColor にすれば、サイトが決めた文字色にそのまま追従する
     （文字が読める配色なら、枠も必ず見える）。 */
  border: 1px solid currentColor;
  text-align: center;
  /* 前後と接して窮屈だったので上下に余白を置く。
     左右は親（一覧）の幅に合わせたままにする。 */
  margin: 28px 0;
  padding: 14px 16px;
}
.list-session{
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 9;
  /* 背景の拡大と寄せは変数で受ける。既定（1・50%）なら今までと同じ見え方。 */
  background-size: auto calc(100% * var(--card-zoom, 1));
  background-position: var(--card-bg-x, 50%) var(--card-bg-y, 50%);
}
@media only screen and (max-width: 480px) {
  .list-session{
    aspect-ratio: 1 / 1;
  }
}

.logo{
  width:100%; max-width: 400px; display:block; margin:0 auto 20px;
}
/* ---- カードを押したあとの「中へ入っていく」演出（利用者の指示・2026-08-23
   「activeになったあとは、画面の中に入っていくような演出になり
    撮影画面に遷移して下さい」）----

   **カードそのものは動かさない。** 同じ絵の板を1枚かぶせて広げる
   （置き場所と大きさは top-session-cards.js が押した瞬間の位置で入れる）。
   カードを動かすと、一覧の高さや下のボタンがつられて動き、
   押した場所から離れていくように見える。

   重なりは案内モーダル（2147483000）より下、購入モーダルより下に置く
   ―― これは遷移のあいだの見せ物で、何かを尋ねる窓ではない。 */
.hs-card-enter{
  position: fixed;
  z-index: 2147482700;
  background-repeat: no-repeat;
  box-shadow: 0 18px 48px rgba(0,0,0,.45);
  transform-origin: 50% 50%;
  will-change: transform, border-radius;
  /* **動かすのは transform だけ。**
     いちど top/left/width/height を補間したが、**遷移までに広がりきらなかった**
     （実測: 0.5秒でカード幅の1割強）。あれは1コマごとにレイアウトを
     やり直す動かし方で、画面いっぱいの板には重い。
     transform なら描画だけで済み、指定した時間どおりに動く。
     どこまで動かすか（寄せと倍率）は押した瞬間の位置から決まるので、
     top-session-cards.js が変数で入れる ―― 時間と曲線はここが持つ。 */
  /* 曲線は**最後まで加速し続ける**もの（利用者の指示・2026-08-23
     「動画の再生のズームインはどんどん加速するように」）。
     はじめの cubic-bezier(.3,0,.55,.3) は終わりで少し緩んでいて、
     いちばん速いところが途中に来ていた。ease-in の四次相当にすると、
     画面を覆う直前がいちばん速くなる ―― そのまま次の画面へ入る形になる。 */
  transition:
    transform .42s cubic-bezier(.5, 0, .75, 0),
    border-radius .22s ease-in;
  /* **最後まで不透明のまま。** 薄くすると後ろのTOPがまた見えて、
     入っていったのに戻ってきたように見える（遷移はそのあとに来る）。
     このまま次の画面に置き換わるので、切り替わりの覆いも兼ねる。 */
  pointer-events: none;         /* 演出の板は操作を受けない */
}
/* **黒へ落としながら入る**（利用者の指示・2026-08-23「もっと機敏に黒に
   段々フェードアウトするように」）。板の上に黒を重ねて濃くしていく ――
   写真を薄くすると後ろのTOPが透けて、入っていったのに戻ってきたように見える。
   入り始めてから少し遅れて濃くなり、着くころに真っ黒になる。 */
.hs-card-enter::after{
  content: "";
  position: absolute;
  inset: 0;
  background: #000;
  opacity: 0;
  /* 遷移する 0.47 秒のところで**真っ黒になりきる**ように合わせてある
     （0.08 待って 0.28 かける ＝ 板が動き出す 0.11 秒から数えて 0.47）。
     早すぎると写真が見えないまま暗くなり、遅すぎると黒くなる前に
     画面が切り替わる。 */
  transition: opacity .28s ease-in .08s;
}
.hs-card-enter.is-in::after{ opacity: 1; }
.hs-card-enter.is-in{
  border-radius: 0;
  /* 画面いっぱいを**少し越える**ところまで（倍率に 1.12 を掛けてある）。
     ちょうどで止まると、そこで待たされているように見える。 */
  transform: translate(var(--enter-dx, 0), var(--enter-dy, 0)) scale(var(--enter-scale, 4));
}
@media (prefers-reduced-motion: reduce) {
  /* 出さない（JS側でも作らないが、念のため）。 */
  .hs-card-enter{ display: none; }
}