/* 求人ページ（スマホ版）：トップ1案（v2/top-d/c/page.html）と同じ見た目にそろえる（2026-10-29・資料60・61）
   ・中身（文章）は wire/recruit-full.html のまま。見た目だけをトップに合わせる
   ・トップは元の C の上に add-*.css を重ねた作りで、ほかのページから読むと関係のない指定まで付いてくるため、
     ヘッダー・メニュー画面・フッターは、トップで実際に表示されている数字（390px 幅で測った値）をここに書き写した
   ・下のバーだけは、トップの add-bar.css をそのまま読む（ほかに頼らず、それだけで形が決まるファイルのため）
   ・トップの数字を変えたら、ここも同じ数字に直す（共通の値は :root の変数にまとめてある）

   サイトの決まり（資料56・58・60）
   ・色：赤 #C32831（赤2）／地 生成り #FDF6EF／カード 一段濃い生成り #F6EBE0／文字 #1a1a1a
   ・文字：本文 14px・行間 2.1・字間 0.05em（日本語はすべて）。押せる部分 44px 以上。12px 未満は使わない
   ・見出し：英字（Music Newsreader）36px を中央、その下に和文 12px
   ・余白：白い面どうし 128（64＋64）／色の面・写真との境目は両側 96／大きな見出しの下 40／要素の間 24／左右 24
   ・動き：大きな動きはなし。「静かに浮かぶ」だけ（6〜20px・0.9〜1.6秒）。動きを減らす設定の人には止める */

:root{
  --red:#c32831; --paper:#fdf6ef; --card:#f6ebe0; --ink:#1a1a1a; --ink2:#2a2a2a; --line:#e6d8ca; --frame:#dccbb9;
  --sans:'Noto Sans JP',sans-serif; --en:'Music Newsreader',Georgia,serif;
  --gutter:24px; --ease:cubic-bezier(.33,1,.68,1);
}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
body{margin:0;background:var(--paper);color:var(--ink);font:400 14px/2.1 var(--sans);letter-spacing:.05em;-webkit-font-smoothing:antialiased}
img{display:block;max-width:100%;height:auto}
a{color:inherit}
h1,h2,h3,p,ol,ul,dl,dd,figure{margin:0}
ol,ul{padding:0;list-style:none}
:focus-visible{outline:2px solid var(--red);outline-offset:2px}
.vh{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* ---- ヘッダー（トップの add-header.css と同じ：元データのロゴを幅 96px で左上、右上は赤い丸のメニューボタン） ---- */
.site-header{position:fixed;top:0;left:0;right:0;height:56px;z-index:12;pointer-events:none}
.site-header .brand{position:fixed;top:8px;left:20px;z-index:13;display:block;line-height:0;pointer-events:auto;transition:opacity .3s ease}
.site-header .brand img{width:96px;height:65.07px}
/* 下に進んだらロゴを隠す（赤い面の上で赤いロゴが消えるため。最初の画面に戻るとまた出る） */
html.scrolled .site-header .brand{opacity:0;pointer-events:none}
.menu-button{position:absolute;top:10px;right:16px;width:44px;height:44px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3.145px;margin:0;padding:1px 6px;border:0;background:transparent;color:#fff;cursor:pointer;pointer-events:auto;isolation:isolate;-webkit-tap-highlight-color:transparent}
.menu-button .menu-disc{position:absolute;left:4px;top:4px;z-index:-1;width:35.38px;height:35.38px}
.menu-button span{display:block;width:14.14px;height:1.17px;background:currentColor}

/* ---- メニュー画面（トップの add-menu.css と同じ：赤い面・項目は英字 24px＋和文 12px を中央） ---- */
dialog.sm{position:fixed;inset:0;width:100%;max-width:none;height:100%;max-height:none;margin:0;padding:0;border:0;overflow:hidden auto;background:var(--red);color:#fff;display:none;flex-direction:column}
dialog.sm[open]{display:flex;animation:sm-in .45s cubic-bezier(.22,1,.36,1) both}
dialog.sm::backdrop{background:transparent}
dialog.sm:focus{outline:none}
.sm-head{position:relative;z-index:2;height:calc(64px + env(safe-area-inset-top,0px));flex:none}
.sm-close{position:absolute;top:calc(10px + env(safe-area-inset-top,0px));right:16px;width:44px;height:44px;margin:0;padding:0;border:0;background:radial-gradient(circle,#fff 17.2px,transparent 17.8px);color:var(--red);cursor:pointer}
.sm-close span{position:absolute;left:15px;top:21.4px;width:14px;height:1.3px;background:currentColor;transform:rotate(45deg)}
.sm-close span+span{transform:rotate(-45deg)}
.sm-nav{flex:0 0 auto;margin-top:auto;display:flex;flex-direction:column;align-items:center;gap:4px;padding:0 24px}
.sm-nav a{display:flex;align-items:baseline;justify-content:center;gap:12px;min-height:56px;padding:12px 16px;color:#fff;text-decoration:none}
.sm-en{font:400 24px/1.2 var(--en);letter-spacing:-.01em}
.sm-ja{font:400 12px/2.1 var(--sans);letter-spacing:.05em;color:rgba(255,255,255,.82)}
.sm-bar{flex:none;align-self:center;display:flex;justify-content:center;width:min(calc(100% - 48px),280px);height:54px;margin-top:40px;border-radius:30px;background:#fff;color:var(--ink);box-shadow:0 2px 20px rgba(45,22,0,.12);font:500 14px/1.5 var(--sans);letter-spacing:.05em;transition:transform .2s ease}
.sm-bar>a{position:relative;flex:1;min-height:54px;display:flex;align-items:center;justify-content:center;gap:8px;color:inherit;text-decoration:none;-webkit-tap-highlight-color:transparent}
.sm-bar img{flex:none;width:13px;height:13px}
.sm-bar.is-press{transform:scale(.97);transition-duration:.06s}
.sm-logo{flex:none;align-self:center;margin-top:auto;padding-top:40px;line-height:0}
.sm-logo img{width:96px;height:65px}
.sm-foot{flex:none;align-self:center;display:flex;flex-direction:column;align-items:center;gap:4px;margin-top:24px;padding:0 24px calc(28px + env(safe-area-inset-bottom,0px))}
.sm-addr{font-size:12px;line-height:2.1;letter-spacing:.05em;text-align:center;opacity:.9}
.sm-sns,.wf-sns{display:flex;gap:4px;margin:0;padding:0;list-style:none}
.sm-sns a,.wf-sns a{display:grid;place-items:center;width:44px;height:44px;color:#fff}
.sm-sns svg,.wf-sns svg{width:20px;height:20px}
dialog.sm[open] .sm-nav a,dialog.sm[open] .sm-bar,dialog.sm[open] .sm-logo,dialog.sm[open] .sm-foot{animation:sm-up .6s cubic-bezier(.22,1,.36,1) both}
dialog.sm[open] .sm-nav a:nth-child(2){animation-delay:.06s}
dialog.sm[open] .sm-nav a:nth-child(3){animation-delay:.12s}
dialog.sm[open] .sm-nav a:nth-child(4){animation-delay:.18s}
dialog.sm[open] .sm-bar{animation-delay:.24s}
@keyframes sm-in{from{opacity:0}to{opacity:1}}
@keyframes sm-up{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}
@media(max-height:620px){.sm-nav a{min-height:48px;padding:8px 16px}}
@media(prefers-reduced-motion:reduce){dialog.sm[open],dialog.sm[open] *{animation:none!important}}
body:has(dialog[open]){overflow:hidden}

/* ---- 見出し（トップの Menu・Information と同じ：英字 36px を中央、下に和文 12px。見出しの下 40） ---- */
.sec-title{display:flex;flex-direction:column;align-items:center;gap:10px;margin:0 0 40px;font:400 36px/36px var(--en);letter-spacing:-.01em;color:var(--red);text-align:center}
.sec-title small{display:block;font:400 12px/2.1 var(--sans);letter-spacing:.05em;color:var(--ink2)}
.on-red .sec-title{color:#fff}
.on-red .sec-title small{color:rgba(255,255,255,.82)}

/* ---- 最初の一画面：写真（ハサミとコケ）。高さは画面の半分（10-14 松原さん：下のキャッチが見えるように） ---- */
.fv{position:relative;height:50svh;min-height:380px;max-height:480px;overflow:hidden;background:#3a3a30}
.fv>img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 45%}
/* 文字の下は、トップの求人カードと同じ暗さ。上の端は、ロゴが読めるように白くぼかす（トップの最初の画面と同じ）
   10-29 直し：暗い膜（::before）が写真の下に隠れて効いていなかった → 重なり順（z-index）を 写真 ＜ 膜・白いぼかし ＜ 文字 にした */
.fv::before{content:'';position:absolute;inset:0;z-index:1;background:linear-gradient(to bottom,rgba(30,22,18,.4),rgba(30,22,18,.2))}
.fv::after{content:'';position:absolute;inset:0 0 auto;z-index:1;height:140px;background:linear-gradient(to bottom,rgba(255,255,255,.82) 0%,rgba(255,255,255,.5) 40%,rgba(255,255,255,0) 100%)}
.fv-title{position:absolute;left:0;right:0;top:calc(50% + 28px);transform:translateY(-50%);z-index:2;display:flex;flex-direction:column;align-items:center;gap:10px;font:400 36px/36px var(--en);letter-spacing:-.01em;color:#fff;text-align:center}
.fv-title small{font:500 13px/2.1 var(--sans);letter-spacing:.1em} /* 12px・400 → 13px・500（10-29 松原さん：写真の上で読みやすく） */

/* ---- キャッチ（トップの「３６０°の感動を。」と同じ：Noto Sans JP 500・24px・赤・中央）。写真との境目なので上下 96 ---- */
.catch{padding:96px var(--gutter) 64px}
.catch+.message{padding-top:64px}
.catch p{font:500 24px/1.75 var(--sans);letter-spacing:.06em;color:var(--ink);text-align:center;white-space:nowrap}
/* キャッチの動き「旋律」（トップのコンセプトと同じ・中身は recruit.js の 3.5）。文字の色は黒（10-29 松原さん） */
.catch p .mel{display:inline-block;opacity:0;transform:translateY(8px);filter:blur(3px)}
.catch p.mel-still .mel{opacity:1;transform:none;filter:none}
.mel-sr{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
@media(prefers-reduced-motion:reduce){.catch p .mel{opacity:1!important;transform:none!important;filter:none!important}}
@media(max-width:359px){.catch p{font-size:21px}}

/* ---- MÜSIC の想い（資料62 の1：赤い面を減らす。10-29 松原さん）
   求人は読む量が多いので、長い文章は生成りの地のまま読ませる。赤はキャッチ・見出し・ボタン・フッターだけ。
   キャッチ（写真の下・上下 96）から続くので、上は 0。見出しの下に写真（木の MÜSIC の文字）→ 文章 ---- */
.message{padding:0 var(--gutter) 64px}
.message .copy{max-width:342px;margin:0 auto}
.message .copy p+p{margin-top:16px}
.msg-photo{max-width:342px;margin:0 auto 40px}
.msg-photo img{width:100%;aspect-ratio:4/3;object-fit:cover;object-position:50% 55%}
.after-msg{padding-top:64px}

/* ?msg=red：前の版（赤い面＋ゆるい弧）。見比べ用。トップのメニューの赤い面と同じ置き方 */
html[data-msg="red"] .message{background:var(--red);color:#fff;padding:96px var(--gutter) calc(96px + 36px);margin-top:0}
html[data-msg="red"] .catch{padding-bottom:96px}
html[data-msg="red"] .message .sec-title{color:#fff}
html[data-msg="red"] .message .sec-title small{color:rgba(255,255,255,.82)}
html[data-msg="red"] .msg-photo{display:none}
html[data-msg="red"] .after-msg{position:relative;overflow-x:clip;padding-top:60px}
html[data-msg="red"] .after-msg::before{content:'';position:absolute;z-index:0;left:-46%;width:190%;top:-36px;height:357px;border-radius:50%;background:var(--paper);pointer-events:none}
html[data-msg="red"] .after-msg>*{position:relative;z-index:1}

/* ---- 白い面のまとまり：どうしの間は 64＋64 ---- */
.blk{padding:64px var(--gutter)}
.blk.last{padding-bottom:96px}
.blk .body{max-width:342px;margin:0 auto}
.blk .body>p+p{margin-top:16px}

/* 写真2枚（トップの Information と同じ組み方：左 192：右 136、右は 120px 下げる） */
.pair{display:grid;grid-template-columns:192fr 136fr;column-gap:14px;align-items:start;margin-bottom:72px}
.pair img{width:100%;aspect-ratio:3/4;object-fit:cover}
.pair .p-a{object-position:50% 60%}
.pair .p-b{margin-top:120px;object-position:50% 50%}

/* 働く魅力：生成りのカード。内側の中央に「Point 01」、その下に 絵 → 赤い見出し → 本文。
   2026-10-29 承認：赤丸と装飾線を外し、番号を上から20pxに配置。
   赤丸がなくなったので、カードの間は 72 → 24（ほかの要素の間と同じ）、写真2枚との間は 96 → 72 に戻した（10-29 松原さん） */
.points{display:flex;flex-direction:column;gap:24px}
.point{position:relative;padding:64px 24px 32px;background:var(--card);text-align:center}
.point-no{position:absolute;left:50%;top:20px;transform:translateX(-50%);width:auto;height:24px;background:none;color:var(--red);display:flex;flex-direction:row;gap:7px;align-items:center;justify-content:center;font:400 20px/1.2 var(--en);letter-spacing:.03em}
.point-no small{font:400 13px/1.2 var(--en);letter-spacing:.05em}
/* 絵：どの絵も同じ 112×68 の枠に収める（絵は Codex で描き直す予定・資料64） */
.point-ic{display:block;width:112px;height:68px;margin:0 auto 16px;object-fit:contain}
.point .h3{margin:0 0 16px;color:var(--red)}
.point p{text-align:left}
.h3{margin:16px 0 8px;font:500 16px/1.75 var(--sans);letter-spacing:.05em;color:var(--ink)}

/* こんな方を募集しています：赤い小さな点 */
.list{display:flex;flex-direction:column;gap:8px}
.list li{position:relative;padding-left:20px}
.list li::before{content:'';position:absolute;left:2px;top:13px;width:6px;height:6px;border-radius:50%;background:var(--red)}

/* 1枚だけの写真（こんな方を募集の下）：中央に、幅は 7 割（10-29 松原さん「右に寄っているのが気になる」） */
/* 空いている一席：横長 4:3 で、上の箇条書きと同じ幅（10-29 松原さん）。椅子が入るよう下寄せ */
.solo{width:100%;margin:40px 0 0}
.solo img{width:100%;aspect-ratio:4/3;object-fit:cover;object-position:50% 90%}

/* 募集要項：表で分かりやすく（10-29 松原さん「フレームを作って中を白に」）
   枠（一段濃い生成りの線）の中を白に。項目名の列は生成り（カードと同じ色）で、行ごとに線で区切る。
   表は2つ：「募集職種と給与」「勤務条件」。それぞれの上に小さな見出し */
.req-label{display:flex;align-items:center;gap:8px;margin:0 0 12px;font:500 14px/1.6 var(--sans);letter-spacing:.05em;color:var(--ink)}
.req-label::before{content:'';width:4px;height:16px;background:var(--red)}
.req-label+*{margin-bottom:40px}
.req-label+*:last-child{margin-bottom:0}
.req-frame{background:#fff;border:1px solid var(--frame)}
.pay{width:100%;border-collapse:collapse;font-size:14px;line-height:1.7;letter-spacing:.05em}
.pay th,.pay td{padding:14px 8px;border:1px solid var(--frame);vertical-align:top;text-align:left;font-weight:400}
.pay tr>:first-child{border-left:0}.pay tr>:last-child{border-right:0}
.pay thead th{border-top:0;background:var(--card);font-size:12px;line-height:1.6;color:var(--ink2);text-align:center;vertical-align:middle;padding:10px 6px} /* 上下の中央（「正社員」が1行、「パート・アルバイト」が2行でも、そろって見えるように） */
.pay tbody tr:last-child>*{border-bottom:0}
.pay tbody th{background:var(--card);font-weight:500;white-space:nowrap}
.pay td small{display:block;font-size:12px;color:var(--ink2)}
.nw{white-space:nowrap} /* 言葉の途中で折り返さない（文節ごとに改行させる。Safari でも効く書き方） */
.req{margin:0}
.req>div{display:grid;grid-template-columns:100px 1fr;border-top:1px solid var(--frame)}
.req>div:first-child{border-top:0}
.req dt{padding:14px 10px;background:var(--card);font-size:12px;line-height:2.1;color:var(--ink2)}
.req dd{padding:12px 12px 12px 14px;min-width:0}
.req dd small{display:block;font-size:12px;color:var(--ink2)}
.dots li{position:relative;padding-left:14px}
.dots li::before{content:'';position:absolute;left:0;top:13px;width:4px;height:4px;border-radius:50%;background:var(--red)}
@media(max-width:359px){.req>div{grid-template-columns:88px 1fr}.req dt{padding:14px 6px}.req dd{padding-left:10px;padding-right:8px}}
/* 幅の狭いスマホ（389px 以下）：表の3列が入りきらないので、職種ごとに縦に並べる（正社員・パートの名前は各行の頭に出す）
   11-03 本文の字間を .10em にしたので 374 → 389 に（375 で 3px はみ出した） */
@media(max-width:389px){
  .pay thead{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
  .pay,.pay tbody,.pay tr,.pay th,.pay td{display:block;width:100%}
  .pay tbody tr+tr{border-top:1px solid var(--frame)}
  .pay tbody th,.pay td{border:0}
  .pay tbody th{padding:10px 12px}
  .pay td{display:grid;grid-template-columns:116px 1fr;column-gap:8px;align-items:baseline;padding:10px 12px}
  .pay td+td{padding-top:0}
  .pay td::before{content:attr(data-label);grid-row:span 2;font-size:12px;line-height:2.1;color:var(--ink2)}
  .pay td br{display:none}
}

/* 長く働ける環境 */
.support .h3{margin-top:0;margin-bottom:16px}
/* Support の写真（時計の絵の代わり。10-29）：壁ぎわの木と黒い扉。Message の写真と同じ 4:3 */
.sup-photo{margin:0 0 40px}
.sup-photo img{width:100%;aspect-ratio:4/3;object-fit:cover}

/* 応募から入社までの流れ：番号（英字）と細い線でつなぐ */
/* 4つの段は同じ高さ（56）にして、丸と丸の間の線の長さをそろえる（10-29 松原さん「縦線の長さがばらばら」）。
   線は1つ目の丸の中心から4つ目の丸の中心まで。丸の中は白（10-29 松原さん） */
.steps{--step:56px;position:relative;display:flex;flex-direction:column;gap:24px}
/* 幅の狭いスマホでは1つ目の文が2行になるので、4つとも同じ高さに上げる */
@media(max-width:374px){.steps{--step:86px}}
.steps::before{content:'';position:absolute;left:15.5px;top:16px;bottom:calc(var(--step) - 16px);width:1px;background:var(--frame)}
.steps li{position:relative;display:grid;grid-template-columns:32px 1fr;column-gap:16px;align-items:baseline;height:var(--step)}
.steps .no{position:relative;display:grid;place-items:center;width:32px;height:32px;border-radius:50%;background:#fff;box-shadow:inset 0 0 0 1px var(--red);font:400 15px/1 var(--en);color:var(--red);align-self:start}
/* 英字書体の数字は字の箱の上寄りに描かれるので、丸の中央に見えるよう下と右へ寄せる（実測：直す前 上 9.75／下 13.0） */
.steps .no{padding:3px 0 0 1px}
.steps b{display:block;font-weight:500;line-height:2.1;padding-top:1px}
.steps small{display:block;font-size:12px;color:var(--ink2)}

/* 応募・お問い合わせ：ボタンの形はメニュー画面の予約ボタンと同じ白い丸い帯 */
/* 応募の欄：写真を背景にして、暗い膜を重ね、その上に文字とボタン（10-29 松原さん）。
   形はトップの求人カード（写真＋暗い膜＋白い文字）と同じ考え方。膜はトップより濃く（文が長いので読みやすさ優先） */
.entry{position:relative;isolation:isolate;padding:56px 24px;color:#fff;text-align:center;overflow:hidden;background:#2b2724}
/* 背景の写真：受付のカウンター（MÜSIC の文字が見える。トップでは未使用・10-29 松原さん決定）。欄と同じ高さで切り、文字の後ろに無地の壁が来る位置 */
.entry-photo{position:absolute;inset:0;z-index:-2;margin:0}
.entry-photo img{width:100%;height:100%;object-fit:cover;object-position:33% 50%}
/* 上下の余白は同じ 56（10-29 松原さん「上下をそろえて狭く」） */
.entry::before{content:'';position:absolute;inset:0;z-index:-1;background:linear-gradient(to bottom,rgba(30,22,18,.5),rgba(30,22,18,.62))}
.entry .sec-title{margin-bottom:24px;color:#fff}
.entry .sec-title small{color:rgba(255,255,255,.88)}
.entry .lead{margin-bottom:32px}
.entry-btns{display:flex;flex-direction:column;align-items:center;gap:16px}
.pill{position:relative;display:flex;align-items:center;justify-content:center;gap:10px;width:min(100%,294px);min-height:54px;padding:0 20px;border-radius:30px;background:#fff;color:var(--ink);box-shadow:0 2px 20px rgba(45,22,0,.12);font:500 14px/1.5 var(--sans);letter-spacing:.05em;text-decoration:none;transition:transform .2s ease;-webkit-tap-highlight-color:transparent}
.pill img{flex:none;width:15px;height:15px}
.pill .num{font:500 16px/1 var(--sans);letter-spacing:.06em;color:var(--red)} /* 20 → 16（10-29 松原さん「電話番号だけ大きく見える」）。数字は仮名より小さく見えるので、隣のボタンの 14px より少しだけ大きく */
.pill.is-press{transform:scale(.97);transition-duration:.06s}
.pill::after{content:'';position:absolute;inset:5px 6px;border-radius:24px;background:var(--red);opacity:0;transition:opacity .2s ease;pointer-events:none}
.pill.is-press::after,.pill:active::after{opacity:.08;transition-duration:.06s}
.entry .note{margin-top:16px;font-size:12px;color:rgba(255,255,255,.88)}

/* ---- フッター（トップと同じ：赤・動きなし） ---- */
.w-footer{position:relative;z-index:1;display:flex;flex-direction:column;align-items:center;gap:20px;padding:96px var(--gutter) calc(96px + 74px + env(safe-area-inset-bottom,0px));background:var(--red);color:#fff;text-align:center}
/* 下の余白＝上の 96 ＋ 下に浮いているバーの分 74（高さ 54・下から 20）。いちばん下までスクロールしたとき、© とバーの間が上の余白と同じ 96 に見える */
.w-footer a{color:#fff;text-decoration:none}
.wf-logo img{width:120px;height:81.33px}
.wf-nav{display:flex;flex-wrap:wrap;justify-content:center;gap:0 4px}
.wf-nav a{display:inline-flex;align-items:center;min-height:44px;padding:0 10px;font:400 16px var(--en);letter-spacing:.04em}
.wf-sns{gap:8px}
.wf-info{font-size:14px;line-height:2.1;letter-spacing:.05em}
.wf-info a{display:inline-flex;align-items:center;min-height:44px}
.w-footer small{display:block;font-size:12px;line-height:1.2;opacity:.8}

/* ---- 下のバー：形はトップの add-bar.css。求人では「電話で応募する」「フォームで応募する」 ---- */
html.js:not(.ready) .a-bar{opacity:0}
.a-bar .ab-form img{width:14px;height:14px} /* メールの絵は余白を切り詰めた形（a-form.svg の viewBox）。電話の絵 13px と目で見て同じ大きさに */
@media(max-width:359px){.a-bar .ab-phone,.a-bar .ab-hol{font-size:13px}}

/* ---- 動き：静かに浮かぶだけ（html.mo は動きを減らす設定でない人だけに付く。JS が動かなくても文字は見える） ---- */
html.mo .rise{opacity:0;transform:translateY(16px)}
html.mo .rise.on{opacity:1;transform:none;transition:opacity 1.2s var(--ease),transform 1.2s var(--ease)}
html.mo .pair.wait img{opacity:0}
html.mo .pair.on img{animation:mo-soft 1.6s var(--ease) both}
html.mo .pair.on .p-b{animation-delay:.6s}
html.mo .pair .p-b{translate:0 var(--py,0px)}
@keyframes mo-soft{from{opacity:0;transform:translateY(20px)}to{opacity:1;transform:none}}