/* =========================================================
   締め動画（リール）新デザイン案の共通
   1080x1920 の設計を 1rem=設計1px として組み、CSSだけで 9:16 に自動フィット（旧版と同じ考え方）。
   色は会社HP（www.tiremanager-foo.com の brand.css）と同じ紺とオレンジ。
   ========================================================= */
:root{
  --navy:#0d1f3c;          /* HP --navy（採用ページと同じ紺） */
  --navy-2:#1a3560;        /* HP --navy-2 */
  --orange:#f77a10;        /* HP --orange */
  --orange-hi:#f99540;     /* HP 押したときの明るいオレンジ */
  --orange-deep:#d8650a;
  --mincho:'Zen Old Mincho','Hiragino Mincho ProN','Yu Mincho',serif;   /* HPの最初の画面の大きな字と同じ */
  --sans:'Zen Kaku Gothic New','Hiragino Sans','Yu Gothic','Meiryo',sans-serif;
  --num:'Archivo','Zen Kaku Gothic New',sans-serif;
}
*{ margin:0; padding:0; box-sizing:border-box; }

/* 1rem = ステージ幅/1080 = 設計1px。100vw か 100vh*9/16 の小さい方に合わせる */
html{
  font-size:calc(min(100vw, 100vh * 9 / 16) / 1080);
  background:#ffffff;
  -webkit-text-size-adjust:100%; text-size-adjust:100%;
}
body{
  width:100%; min-height:100vh;
  background:#ffffff;                /* 枠外は白＝リール(9:16)の範囲が一目で分かる */
  overflow:hidden;
  display:flex; align-items:center; justify-content:center;
  font-family:var(--sans);
  -webkit-font-smoothing:antialiased;
}
.stage{ position:relative; width:1080rem; height:1920rem; overflow:hidden; color:#fff; background:var(--navy); }
.content{ position:absolute; inset:0; }   /* 頭出しのときはここだけ入れ替えて最初から再生し直す */

/* ---- Instagram の丸いアイコン ---- */
.ig-row{ display:flex; align-items:center; justify-content:center; gap:26rem; }
.ig-ic{
  width:var(--s,104rem); height:var(--s,104rem); border-radius:50%; background:#fff; flex:none;
  display:flex; align-items:center; justify-content:center;
  box-shadow:0 14rem 30rem rgba(0,0,0,.32);
}
.ig-ic svg{ width:54%; height:54%; display:block; }
.ig-ic path{ fill:url(#ig-grad); }
.ig-name{ font:800 52rem/1 var(--num); letter-spacing:.01em; }

/* ---- フォローしてね（HPと同じオレンジの札に紺の字・光が横切る） ---- */
.pill{
  position:relative; display:inline-block; overflow:hidden;
  padding:26rem 70rem 28rem; border-radius:999rem;
  font:900 48rem/1.1 var(--sans); letter-spacing:.08em; text-indent:.08em;
  color:var(--navy);
  background:linear-gradient(180deg, var(--orange-hi) 0%, var(--orange) 55%, var(--orange-deep) 100%);
  box-shadow:0 16rem 36rem rgba(247,122,16,.32);
}
.pill::after{
  content:""; position:absolute; top:0; bottom:0; left:-45%; width:32%;
  background:linear-gradient(100deg, transparent, rgba(255,255,255,.6), transparent);
  transform:skewX(-18deg); opacity:0;
}
.go .pill::after{ animation:shine 2.6s ease-in-out var(--shine,5s) infinite; }
@keyframes shine{ 0%{ left:-45%; opacity:1; } 42%,100%{ left:125%; opacity:1; } }
@keyframes pulse{ 0%,100%{ transform:scale(1); } 50%{ transform:scale(1.05); } }

/* ---- よく使う動き ---- */
@keyframes fadeUp{ from{ opacity:0; transform:translateY(36rem); } to{ opacity:1; transform:none; } }
@keyframes fadeIn{ from{ opacity:0; } to{ opacity:1; } }
@keyframes popIn{ 0%{ opacity:0; transform:scale(.4); } 60%{ opacity:1; transform:scale(1.08); } 100%{ opacity:1; transform:scale(1); } }

/* ---- 操作ボタン（ステージの外・録画には写らない。実ピクセル固定） ---- */
.controls{ position:fixed; bottom:14px; left:50%; transform:translateX(-50%); display:flex; gap:10px; z-index:50; }
.controls button{
  font:600 13px/1 sans-serif; color:#222; background:#fff;
  border:1px solid rgba(0,0,0,.25); padding:8px 14px; border-radius:999px; cursor:pointer;
  box-shadow:0 2px 8px rgba(0,0,0,.18);
}
.controls button:hover{ background:#ffe9d6; border-color:var(--orange); }
.hint{
  position:fixed; bottom:52px; left:50%; transform:translateX(-50%);
  font:600 12px/1.4 sans-serif; color:#fff; background:rgba(0,0,0,.5);
  padding:6px 12px; border-radius:8px; z-index:50; white-space:nowrap;
}
body.clean .controls, body.clean .hint,
body.embed .controls, body.embed .hint{ display:none; }