@charset "UTF-8";
/* 動くトップ画面のデモの節（2026-10-11）。トップの町のすぐ下に置く。トップだけが読む。
   ・枠は黒。幅の広い画面は 16:9、幅 767px 以下は 9:16（縦長。高さは画面の 82% まで）
   ・幅は --c-wider（style.css）。左右に少し余白を残し、端から端へ突き抜けさせない。角は --r
   ・待ち受けの画像は、is-near が付いてから読む（assets/js/motion-demo.js が、近づいたときに付ける）。
     最初に開いたときの重さに入れないため。JS が動かない人には、雛形の noscript の style が同じ画像を出す
   ・添え書きは枠の幅にそろえ、すぐ下に寄せる（歯科医院の見本 .ddemo__note と同じ作法） */
.mdemo { --md-w: var(--c-wider); }

.mdemo__stage {
  position: relative;
  width: var(--md-w);
  margin-inline: calc(50% - var(--md-w) / 2);
  aspect-ratio: 16 / 9;
  overflow: hidden;
  background: #0d0c0b center / cover no-repeat;
  border-radius: var(--r);
}
.mdemo__stage.is-near { background-image: url(/demo/tanigawa-seo/poster-wide.webp); }
.mdemo__frame {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  border: 0;
}

.mdemo__note { width: var(--md-w); margin-inline: calc(50% - var(--md-w) / 2); }
[data-customer-scaffold] .section > .wrap > .mdemo__note { margin-top: .75rem; }

/* 狭い画面は縦長。幅は「余白を残した幅」と「画面の高さの 82% に 9:16 で収まる幅」の小さいほう */
@media (max-width: 767px) {
  .mdemo {
    --md-h: 82vh;
    --md-w: min(var(--c-wider), var(--md-h) * 9 / 16);
  }
  .mdemo__stage { aspect-ratio: 9 / 16; }
  .mdemo__stage.is-near { background-image: url(/demo/tanigawa-seo/poster-tall.webp); }
}
/* スマートフォンの上下の帯が出ている間も収まるよう、使える端末では小さいほうの画面の高さで測る */
@supports (height: 1svh) {
  @media (max-width: 767px) {
    .mdemo { --md-h: 82svh; }
  }
}