/* ============================================================
   custom.css — 本番（Studio）デザインからの変更分
   生成される CSS の後に読み込まれるので、ここに書いたものが勝つ。
   変更履歴:
   - 2026-11-06 クライアント修正: ヘッダー注記の視認性、電話クリックのポップアップ
   - 2026-11-06 スケジュールを今週の日付表示に変更
   ============================================================ */

/* ---- ヘッダー: 電話番号の下の注記を読みやすく（10px 灰 → 12px 濃色・行間広め） ---- */
.render-canvas .text-5ea4f {
  font-size: 12px;
  line-height: 1.5;
  color: var(--color-text, #333);
  font-family: var(--font-inter);
}
@media (max-width: 840px) {
  .render-canvas .text-5ea4f { font-size: 11px; }
}

/* ---- 電話番号はクリックでポップアップ（ヘッダー・Contact 共通） ---- */
[data-phone-popup] { cursor: pointer; }
[data-phone-popup]:hover { opacity: .7; }

.phone-popup {
  z-index: 20;                      /* SP メニュー（z-index 10）の上に出す */
  align-items: center;
  justify-content: center;
  background: rgba(0, 0, 0, .4);
  padding: 24px;
}
.phone-popup__panel {
  background: #fff;
  border-radius: 16px;
  padding: 36px 32px 28px;
  width: 480px;
  max-width: 100%;
  gap: 16px;
  text-align: center;
  box-shadow: 0 16px 48px rgba(0, 0, 0, .18);
}
.phone-popup__title {
  font-family: var(--font-noto-jp);
  font-size: 18px;
  font-weight: 500;
  line-height: 1.6;
  color: var(--color-text-dark, #222);
}
.phone-popup__text {
  font-family: var(--font-inter);
  font-size: 14px;
  line-height: 1.8;
  color: var(--color-text-body, #4d4d4d);
}
.phone-popup__line,
.phone-popup__mail {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 100%;
  padding: 14px 24px;
  border-radius: 6px;
  font-family: var(--font-lato);
  font-size: 15px;
  font-weight: 700;
  transition: opacity .3s var(--ease-studio);
}
.phone-popup__line { background: var(--color-line-green, #06c755); color: #fff; }
.phone-popup__mail { border: 1px solid var(--color-text-dark, #222); color: var(--color-text-dark, #222); }
.phone-popup__line:hover, .phone-popup__mail:hover { opacity: .85; }
.phone-popup__close {
  margin-top: 4px;
  font-family: var(--font-inter);
  font-size: 13px;
  color: var(--color-text-muted, #929299);
  cursor: pointer;
  text-decoration: underline;
}

/* ---- スケジュール: 休みの日は灰、出勤日はピンク（JS が is-Vfqmlw_p を付け外しする） ---- */
[data-schedule] [data-dow] .el-4d70c { transition: opacity .3s var(--ease-studio); }
[data-schedule] [data-dow]:not(.is-Vfqmlw_p) .group-b31b5 { display: none; }
[data-schedule] [data-dow].is-today .text-bc54a { text-decoration: underline; text-underline-offset: 4px; }

/* ============================================================
   2026-11-06 UI/UX 磨き込み
   ============================================================ */

/* ---- 0. 基本: スムーススクロール・アンカーの固定ヘッダー分の余白 ---- */
html { scroll-behavior: smooth; scroll-padding-top: 120px; }
@media (max-width: 540px) { html { scroll-padding-top: 100px; } }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

/* ---- 1. はみ出し修正 ---- */
/* more 内の説明ブロック: SP で固定幅 469px だったため文章が画面外に出ていた */
@media (max-width: 540px) {
  .render-canvas .group-0dc91, .render-canvas .group-0e692,
  .render-canvas .group-f82a3, .render-canvas .group-43623 { width: 100%; max-width: 100%; }
}
/* 規約ボックス: 内部スクロールをやめて全文を読めるように */
.render-canvas .group-20766, .render-canvas .group-38a0d { height: auto; max-height: none; overflow: visible; }

/* ---- 2. スクロール表示アニメーション（JS が .reveal / .is-in を付ける） ---- */
@media (prefers-reduced-motion: no-preference) {
  .has-js .reveal {
    opacity: 0;
    transform: translate3d(0, 28px, 0);
    transition: opacity .9s cubic-bezier(.2, .7, .2, 1), transform .9s cubic-bezier(.2, .7, .2, 1);
    transition-delay: var(--reveal-delay, 0ms);
    will-change: opacity, transform;
  }
  .has-js .reveal.is-in { opacity: 1; transform: none; }
  .has-js .reveal.is-in.reveal-done { will-change: auto; }
}

/* ---- 3. 背景オブジェクトのパララックス（JS が .parallax を付けて transform を更新） ---- */
.parallax {
  transition: none !important; will-change: transform; backface-visibility: hidden;
  transform: translate3d(var(--px, 0px), var(--py, 0px), 0) rotate(var(--pr, 0deg));
  animation: bg-float var(--float-dur, 6s) ease-in-out var(--float-delay, 0s) infinite alternate;  /* 止まっていても静かに浮く */
}
@keyframes bg-float { from { translate: 0 -6px; } to { translate: 0 6px; } }
@media (prefers-reduced-motion: reduce) { .parallax { animation: none; } }

/* ---- 4. ヒーローのスライダー: トラック方式（矢印・ドット・ドラッグ・ズーム演出） ---- */
.carousel-wrap { position: relative; width: 1076px; max-width: 100%; flex: none; overflow: hidden; }
.carousel-wrap .carousel--track {
  overflow: visible !important;          /* クリップは wrap 側で行う */
  width: 100% !important; max-width: none !important;
  justify-content: flex-start !important;  /* Studio の中央寄せだとトラックが半分ずれる */
  cursor: grab; touch-action: pan-y; will-change: transform;
}
.carousel-wrap .carousel--track.is-dragging { cursor: grabbing; }
.carousel-wrap .carousel--track > .sd { flex: none; width: 100%; user-select: none; -webkit-user-drag: none; transform: none !important; transition: none !important; }
/* ヒーローの文字・ロゴはドラッグに少し遅れて付いてくる（写真より手前にある感じ） */
.carousel-wrap .carousel--track .hero__name, .carousel-wrap .carousel--track .hero__logo,
.carousel-wrap .carousel--track .hero__brand, .carousel-wrap .carousel--track .hero__city {
  translate: calc(var(--drag, 0px) * .22) 0;
  transition: translate .6s cubic-bezier(.22,.61,.36,1), opacity .6s ease !important;
}
.carousel-wrap .carousel--track.is-dragging .hero__name, .carousel-wrap .carousel--track.is-dragging .hero__logo,
.carousel-wrap .carousel--track.is-dragging .hero__brand, .carousel-wrap .carousel--track.is-dragging .hero__city { transition: none !important; }
/* 表示中以外のスライドでは文字を少し外に置いておき、切り替わると滑り込む */
/* :first-child を除外: JS が動く前（Web フォント読込待ちで 1 秒以上かかることがある）は先頭の 1 枚が表示中なので、
   その文字は最初から見せる。JS 起動後の先頭はループ用クローンで画面外なので影響なし */
.carousel-wrap .carousel--track > .sd:not(.is-active):not(:first-child) .hero__name,
.carousel-wrap .carousel--track > .sd:not(.is-active):not(:first-child) .hero__brand { translate: -40px 0; opacity: 0; }
.carousel-wrap .carousel--track > .sd:not(.is-active):not(:first-child) .hero__logo,
.carousel-wrap .carousel--track > .sd:not(.is-active):not(:first-child) .hero__city { translate: 40px 0; opacity: 0; }
.carousel-wrap .carousel--track > .sd.is-active .hero__name,
.carousel-wrap .carousel--track > .sd.is-active .hero__brand,
.carousel-wrap .carousel--track > .sd.is-active .hero__logo,
.carousel-wrap .carousel--track > .sd.is-active .hero__city { transition-delay: .15s; }
.carousel-wrap .carousel--track.is-dragging > .sd .hero__name, .carousel-wrap .carousel--track.is-dragging > .sd .hero__brand,
.carousel-wrap .carousel--track.is-dragging > .sd .hero__logo, .carousel-wrap .carousel--track.is-dragging > .sd .hero__city { opacity: 1; }
/* スライド中のゆっくりしたズーム（表示中の 1 枚だけ） */
.carousel-wrap .carousel--track > .sd .image::before { transform: scale(1.06); transition: transform 1.2s var(--ease-studio); transform-origin: 50% 40%; }
@media (prefers-reduced-motion: no-preference) {
  .carousel-wrap .carousel--track > .sd.is-active .image::before { animation: hero-zoom 7s cubic-bezier(.2,.6,.2,1) forwards; }
}
@keyframes hero-zoom { from { transform: scale(1.06); } to { transform: scale(1.0); } }
/* ドットの進行表示（自動送りの残り時間） */
.carousel-dots button { position: relative; overflow: hidden; }
.carousel-dots button.is-active::after {
  content: ""; position: absolute; inset: 0; width: 0; border-radius: inherit;
  background: var(--color-purple, #cc8fe2);
}
.carousel-dots button.is-active.is-playing::after { animation: dot-progress var(--auto, 4000ms) linear forwards; }
@keyframes dot-progress { from { width: 0; } to { width: 100%; } }
.carousel-nav {
  position: absolute; top: 50%; z-index: 3;
  width: 48px; height: 48px; margin-top: -24px;
  border-radius: 50%;
  background: rgba(255, 255, 255, .85);
  color: var(--color-text-dark, #222);
  box-shadow: 0 4px 16px rgba(0, 0, 0, .15);
  display: flex; align-items: center; justify-content: center;
  cursor: pointer; opacity: 0;
  transition: opacity .3s var(--ease-studio), transform .3s var(--ease-studio), background .3s;
}
.carousel-nav.prev { left: 16px; }
.carousel-nav.next { right: 16px; }
.carousel-wrap:hover .carousel-nav, .carousel-nav:focus-visible { opacity: 1; }
.carousel-nav:hover { background: #fff; transform: scale(1.08); }
.carousel-nav .material-icons { font-size: 28px; }
.carousel-dots {
  position: absolute; left: 0; right: 0; bottom: 16px; z-index: 3;
  display: flex; justify-content: center; gap: 8px;
}
.carousel-dots button {
  width: 8px; height: 8px; border-radius: 50%;
  background: rgba(255, 255, 255, .55);
  border: 0; padding: 0; cursor: pointer;
  transition: transform .3s var(--ease-studio), background .3s, width .3s;
}
.carousel-dots button.is-active { background: #fff; width: 24px; border-radius: 4px; }
@media (max-width: 840px) {
  .carousel-nav { opacity: 1; width: 40px; height: 40px; margin-top: -20px; background: rgba(255, 255, 255, .7); }
  .carousel-nav .material-icons { font-size: 24px; }
}
@media (max-width: 540px) {
  .carousel-nav { display: none; }   /* スマホはスワイプとドット */
  .carousel-dots { bottom: 10px; }
}

/* ---- 5. トップの写真リスト: スナップ付き横スクロール ---- */
.render-canvas .list-7757e { scroll-snap-type: x proximity; scrollbar-width: none; -webkit-overflow-scrolling: touch; }
.render-canvas .list-7757e::-webkit-scrollbar { display: none; }
.render-canvas .list-7757e > li { scroll-snap-align: start; }

/* ---- 6. ホバーの手応え ---- */
@media (hover: hover) {
  .render-canvas .group-ee70b { transition: transform .5s var(--ease-studio); }
  .render-canvas .group-ee70b:hover { transform: translateY(-6px); }
  .render-canvas .list-7757e > li { transition: transform .4s var(--ease-studio); }
  .render-canvas .list-7757e > li:hover { transform: translateY(-4px); }
  .render-canvas .group-95f83 > img, .render-canvas .group-701af > img { transition: transform .5s var(--ease-studio), box-shadow .5s var(--ease-studio); }
  .render-canvas .group-95f83 > img:hover, .render-canvas .group-701af > img:hover { transform: translateY(-6px) scale(1.02); box-shadow: 0 12px 32px rgba(0, 0, 0, .22); }
  .render-canvas [data-toggle] > button:hover .material-icons { transform: translateY(2px); }
}

/* ---- 7. スケジュール: SP は横スクロール（縦に 7 枚並ぶのをやめる） ---- */
@media (max-width: 540px) {
  .render-canvas [data-schedule] {
    flex-direction: row !important; flex-wrap: nowrap !important;
    justify-content: flex-start !important; align-items: flex-start !important;
    gap: 12px !important; width: 100% !important; max-width: 100% !important;
    padding: 24px 24px 32px !important;
    overflow-x: auto !important; overflow-y: hidden !important;
    scroll-snap-type: x mandatory; scrollbar-width: none;
  }
  .render-canvas [data-schedule]::-webkit-scrollbar { display: none; }
  .render-canvas [data-schedule] > [data-dow] { width: auto !important; flex: none !important; scroll-snap-align: center; }
}

/* ============================================================
   2026-11-06 ご提供サービスのカード（画像 → HTML/CSS、CMS で編集可）
   元画像のデザインを踏襲: 角丸 26px、色付き枠、白い本文パネル、手書き風本文、# タグ
   ============================================================ */
.render-canvas .svc-grid { align-items: stretch; }
.render-canvas .svc-card {
  --card: #c9a0e6;                 /* purple */
  --card-dark: #b589d9;
  align-items: stretch;
  background: var(--card);
  border-radius: 26px;
  padding: 18px 18px 22px;
  gap: 16px;
  box-shadow: 0 2px 15px rgba(0, 0, 0, .2);
  min-height: 406px;               /* 元画像 340×406 相当 */
  transition: transform .5s var(--ease-studio), box-shadow .5s var(--ease-studio);
}
.render-canvas .svc-card--pink { --card: #e39ae0; --card-dark: #d47fd1; }
@media (hover: hover) {
  .render-canvas .svc-card:hover { transform: translateY(-6px); box-shadow: 0 14px 32px rgba(0, 0, 0, .22); }
}
.render-canvas .svc-card__head {
  flex-direction: row;
  align-items: center;
  gap: 14px;
  width: 100%;
  padding: 2px 4px;
}
.render-canvas .svc-card__dot {
  flex: none;
  width: 40px; height: 40px;
  border-radius: 50%;
  background: #fff;
}
.render-canvas .svc-card__title {
  font-family: var(--font-noto-jp);
  font-size: 24px;
  font-weight: 700;
  color: #fff;
  letter-spacing: .02em;
  line-height: 1.3;
  text-align: left;
  justify-content: flex-start;
  margin: 0;
}
.render-canvas .svc-card__body {
  position: relative;
  width: 100%;
  min-height: 200px;
  background: #fff;
  border-radius: 6px;
  padding: 28px 22px;
  justify-content: center;
  overflow: hidden;
}
.render-canvas .svc-card__body::before {           /* SR ロゴの透かし */
  content: "";
  position: absolute; inset: 0;
  background: url('/assets/img/10ba0fcd.png') center / 110px auto no-repeat;
  opacity: .07;
  pointer-events: none;
}
.render-canvas .svc-card__text {
  position: relative;
  font-family: var(--font-hand);
  font-size: 18px;
  font-weight: 400;
  line-height: 2;
  color: #4d4d4d;
  text-align: left;
  justify-content: flex-start;
  letter-spacing: .04em;
}
.render-canvas .svc-card__tags {
  width: 100%;
  align-items: flex-start;
  gap: 10px;
  padding: 4px 6px 0;
}
.render-canvas .svc-card__tag {
  font-family: var(--font-noto-jp);
  font-size: 17px;
  font-weight: 700;
  color: #fff;
  line-height: 1.3;
  text-align: left;
  justify-content: flex-start;
}
@media (max-width: 840px) {
  .render-canvas .svc-card { min-height: 0; }
}
@media (max-width: 540px) {
  .render-canvas .svc-grid { width: 100%; max-width: 100%; justify-content: center; }
  .render-canvas .svc-card { width: 100%; max-width: 340px; padding: 16px 16px 20px; }
  .render-canvas .svc-card__title { font-size: 21px; }
  .render-canvas .svc-card__body { min-height: 0; padding: 22px 18px; }
  .render-canvas .svc-card__text { font-size: 16px; }
  .render-canvas .svc-card__tag { font-size: 15px; }
}

/* ============================================================
   2026-11-06 トップのヒーロー: 合成画像 → キャストの写真 2 枚＋文字
   左: カラー写真・名前・ロゴ / 右: 白黒写真・SHAMROCK SHIBUYA
   ============================================================ */
.render-canvas .hero { flex-direction: row; align-items: stretch; width: 100%; background: #d9d9dc; }
.render-canvas .hero__pane {
  position: relative;
  flex: 1 1 50%;
  width: 50%;
  height: 100%;
  overflow: hidden;
  justify-content: flex-end;
  align-items: flex-start;
  container-type: inline-size;        /* 文字サイズをペイン幅基準にする */
}
.render-canvas .hero__color { order: 1; }
.render-canvas .hero__bw { order: 2; }
.render-canvas .hero__pane::before { background-position: 50% 20%; }
.render-canvas .hero__bw::before { filter: grayscale(1) contrast(1.05); }
/* 切り抜き写真（任意）: 背景写真 → 文字 → 切り抜いた人物 の順に重ね、SHAMROCK が顔と被らないようにする。
   背景と同じ cover / 位置 / ズームにして、ずれないようにする */
.render-canvas .hero__cut { display: none; }
.render-canvas .has-cut .hero__cut {
  display: block; position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; object-position: 50% 20%;
  filter: grayscale(1) contrast(1.05); z-index: 1; pointer-events: none;
}
.render-canvas .has-cut .hero__brand { z-index: 0; }   /* SHAMROCK だけ人物の後ろ */
.render-canvas .has-cut .hero__city { z-index: 2; }    /* SHIBUYA は前（クライアント指定） */
.carousel-wrap .carousel--track > .sd.is-active .hero__cut { animation: hero-zoom 7s cubic-bezier(.2,.6,.2,1) forwards; }

/* 左: 名前とロゴ */
.render-canvas .hero__name {
  position: absolute; left: 4%; bottom: 5%;
  font-family: var(--font-futura);
  font-size: 17cqw; font-weight: 500; letter-spacing: .03em; line-height: 1;
  color: #fff; text-shadow: 0 2px 24px rgba(0, 0, 0, .25);
}
.render-canvas .hero__logo {
  position: absolute; right: 4%; bottom: 5%;
  width: 28cqw; max-width: 170px; height: auto;
  filter: drop-shadow(0 2px 12px rgba(0, 0, 0, .25));
  object-fit: contain;
}

/* 右: SHAMROCK / SHIBUYA */
.render-canvas .hero__brand,
.render-canvas .hero__city {
  position: absolute; left: 0; right: 0;
  font-family: var(--font-display);
  font-weight: 300;
  font-size: 25cqw; line-height: .9;
  letter-spacing: .01em;
  color: #fff;
  justify-content: center;
  white-space: nowrap;
  text-shadow: 0 2px 24px rgba(0, 0, 0, .2);
}
.render-canvas .hero__brand { top: 2%; }
.render-canvas .hero__city { bottom: 2%; }
.render-canvas .hero__accent { color: var(--color-purple, #cc8fe2); font-family: inherit; font-size: inherit; font-weight: inherit; }

@media (max-width: 540px) {
  .render-canvas .hero__name { left: 5%; bottom: 9%; }          /* ドットと重ならない高さに */
  .render-canvas .hero__logo { bottom: 9%; }
  .render-canvas .hero__city { bottom: 7%; }
  .render-canvas .hero__brand, .render-canvas .hero__city { font-size: 22cqw; }   /* 端に余白を残す */
  .render-canvas .hero__logo { right: 5%; bottom: 6%; }
}

/* ---- #Yoyaku の LINE ボタン（#Contact のボタンと同じ見た目） ---- */
.render-canvas .yoyaku-line {
  flex-direction: row; align-items: center; justify-content: center; gap: 8px;
  background: #fff; border: 1px solid var(--color-line-green); border-radius: 6px;
  padding: 14px 24px; width: auto; margin-top: -24px;   /* 一文との間隔を group の gap 64px より詰める */
  transition: opacity .3s var(--ease-studio), transform .3s var(--ease-studio), box-shadow .3s var(--ease-studio);
}
.render-canvas .yoyaku-line:hover { opacity: .9; transform: translateY(-2px); box-shadow: 0 8px 24px rgba(6, 199, 85, .18); }
.render-canvas .yoyaku-line__icon { width: 29px; height: auto; flex: none; }
.render-canvas .yoyaku-line__label { color: var(--color-line-green); font-family: var(--font-lato); font-size: 15px; font-weight: 700; line-height: 1.75; }
@media (max-width: 540px) {
  .render-canvas .yoyaku-line { width: 173px; margin-top: -8px; }
  .render-canvas .yoyaku-line__icon { width: 34px; }
}

/* ---- 年齢確認ページ: 3.7MB の GIF（90 コマ・2.7 秒）をやめ、静止画の水彩＋ロゴ＋ボタンを CSS で順に出す ----
   0s 水彩がふわっと広がる → 0.6s ロゴがにじみから浮かぶ → 1.3s ボタンが下から順に → 1.7s 注意書き。合計 2 秒弱 */
.render-canvas .ame-gif-323bf, .render-canvas .ame-gif-2498b { position: relative; overflow: hidden; }
.render-canvas .ame-gif-323bf::before, .render-canvas .ame-gif-2498b::before { background-image: none; background-color: #fff; }
/* 左右のインク: 小さく縮んだ状態から一気に広がって「べちゃっ」と落ち、少し揺れて落ち着く */
.render-canvas .gate-ink__img { display: block; width: 100%; height: auto; }
.render-canvas .gate-ink {
  position: absolute; z-index: 0; pointer-events: none; height: auto; max-width: none;
  animation: ink-splat 1s cubic-bezier(.2,.9,.3,1.15) both;
  will-change: transform, filter, opacity;
}
.render-canvas .gate-ink--tl { top: -1vh; left: -1vw; width: clamp(260px, 40vw, 600px); transform-origin: 48% 32%; animation-delay: .08s; }
.render-canvas .gate-ink--br { bottom: -1vh; right: -1vw; width: clamp(280px, 44vw, 660px); transform-origin: 58% 73%; animation-delay: .34s; }
.render-canvas .ame-gif-2498b .gate-ink--tl { width: 54vw; transform-origin: 45% 25%; }
.render-canvas .ame-gif-2498b .gate-ink--br { width: 44vw; transform-origin: 60% 75%; }
@keyframes ink-splat {
  0%   { opacity: 0; transform: scale(.12) rotate(-10deg); filter: blur(10px) saturate(1.6); }
  14%  { opacity: 1; transform: scale(1.22) rotate(3deg);  filter: blur(0)    saturate(1.35); }   /* 着弾 */
  26%  { transform: scale(.93) rotate(-1.5deg); filter: saturate(1.15); }
  40%  { transform: scale(1.05) rotate(.5deg); }
  56%  { transform: scale(.985); }
  72%  { transform: scale(1.01); }
  100% { opacity: 1; transform: scale(1) rotate(0); filter: none; }
}
/* 着弾の瞬間に飛び散る雫（擬似要素 2 つ） */
.render-canvas .gate-ink::before, .render-canvas .gate-ink::after {
  content: ''; position: absolute; border-radius: 50% 50% 50% 50% / 60% 60% 40% 40%;
  background: #6b3fa0; opacity: 0; animation: ink-drop .75s cubic-bezier(.2,.7,.3,1) both;
}
.render-canvas .gate-ink--tl::before { left: 44%; top: 30%; width: 14px; height: 18px; --dx: 150px; --dy: 110px; animation-delay: .2s; }
.render-canvas .gate-ink--tl::after  { left: 50%; top: 36%; width: 9px;  height: 11px; --dx: 210px; --dy: 30px;  animation-delay: .22s; }
.render-canvas .gate-ink--br::before { left: 55%; top: 70%; width: 14px; height: 18px; --dx: -160px; --dy: -120px; animation-delay: .46s; }
.render-canvas .gate-ink--br::after  { left: 60%; top: 66%; width: 9px;  height: 11px; --dx: -60px;  --dy: -220px; animation-delay: .48s; }
@keyframes ink-drop {
  0%   { opacity: 0; transform: translate(0, 0) scale(.4); }
  15%  { opacity: .9; }
  100% { opacity: 0; transform: translate(var(--dx), var(--dy)) scale(1.1); }
}
/* ロゴ（SHAMROCK Shibuya）は ::after で中央に置き、にじみから浮かび上がる */
.render-canvas .ame-gif-323bf::after, .render-canvas .ame-gif-2498b::after {
  content: ''; position: absolute; left: 50%; top: 50%; z-index: 1; pointer-events: none;
  width: clamp(240px, 34vw, 660px); aspect-ratio: 1270 / 551;
  background: url(/assets/img/logo-sr-shibuya.png) center / contain no-repeat;
  transform: translate(-50%, -50%);
  animation: gate-logo 1.1s cubic-bezier(.22,.61,.36,1) .85s both;
}
.render-canvas .ame-gif-2498b::after { top: 34%; width: min(50vw, 320px); }
@keyframes gate-logo {
  from { opacity: 0; filter: blur(10px); transform: translate(-50%, -50%) scale(.94) translateY(10px); }
  to   { opacity: 1; filter: blur(0);    transform: translate(-50%, -50%); }
}
/* ボタン: Studio の「3 秒待って 60px 上がる」をやめ、1.3 秒からボタンごとに順に浮かぶ */
.render-canvas .group-ca240, .render-canvas .group-21c15 { position: relative; z-index: 2; }
.render-canvas .group-ca240.appear, .render-canvas .group-ca240.appear-active,
.render-canvas .group-21c15.appear, .render-canvas .group-21c15.appear-active { opacity: 1; translate: 0 0; transition: none; }
.render-canvas .group-ca240 > .sd, .render-canvas .group-21c15 > .sd {
  animation: gate-rise .7s cubic-bezier(.22,.61,.36,1) both;
}
.render-canvas .group-ca240 > .sd:nth-child(1) { animation-delay: 1.5s; }
.render-canvas .group-ca240 > .sd:nth-child(2) { animation-delay: 1.65s; }
/* SP は column-reverse で Enter が上、Exit が下 */
.render-canvas .group-21c15 > .sd:nth-child(1) { animation-delay: 2.1s; }   /* 注意書き */
.render-canvas .group-21c15 > .sd:nth-child(2) { animation-delay: 1.8s; }   /* Exit（下） */
.render-canvas .group-21c15 > .sd:nth-child(3) { animation-delay: 1.6s; }   /* Enter（上） */
.render-canvas .text-a8650 { position: relative; z-index: 2; animation: gate-rise .7s cubic-bezier(.22,.61,.36,1) 1.95s both; }
@keyframes gate-rise { from { opacity: 0; transform: translateY(22px); } to { opacity: 1; transform: none; } }
/* ボタンのホバー・押下: 明るさを落とすだけだったのを、浮き上がり＋紫の影に */
.render-canvas .rect-eef29, .render-canvas .rect-9d58e, .render-canvas .rect-248fb, .render-canvas .rect-0ee42 {
  cursor: pointer;
  transition: transform .35s cubic-bezier(.22,.61,.36,1), box-shadow .35s cubic-bezier(.22,.61,.36,1), background-color .35s ease;
}
.render-canvas .rect-eef29:hover, .render-canvas .rect-9d58e:hover, .render-canvas .rect-248fb:hover, .render-canvas .rect-0ee42:hover {
  filter: none; -webkit-backdrop-filter: none; backdrop-filter: none;
  transform: translateY(-4px); box-shadow: 0 14px 32px rgba(204, 143, 226, .35); background-color: #fbf7fd;
}
.render-canvas .rect-eef29:active, .render-canvas .rect-9d58e:active, .render-canvas .rect-248fb:active, .render-canvas .rect-0ee42:active {
  transform: translateY(-1px) scale(.985); box-shadow: 0 6px 16px rgba(204, 143, 226, .3); transition-duration: .12s;
}
.render-canvas .rect-eef29:focus-visible, .render-canvas .rect-9d58e:focus-visible, .render-canvas .rect-248fb:focus-visible, .render-canvas .rect-0ee42:focus-visible {
  outline: 3px solid var(--color-purple); outline-offset: 4px;
}
/* Enter を押したら 0.35 秒でページ全体をフェードアウトしてから遷移（JS が body に is-leaving を付ける） */
.gate-page main { transition: opacity .35s ease, transform .35s cubic-bezier(.22,.61,.36,1); }
.gate-page.is-leaving main { opacity: 0; transform: scale(1.02); pointer-events: none; }
@media (prefers-reduced-motion: reduce) {
  .render-canvas .ame-gif-323bf::before, .render-canvas .ame-gif-2498b::before,
  .render-canvas .ame-gif-323bf::after, .render-canvas .ame-gif-2498b::after,
  .render-canvas .group-ca240 > .sd, .render-canvas .group-21c15 > .sd, .render-canvas .text-a8650,
  .render-canvas .gate-ink, .render-canvas .gate-ink::before, .render-canvas .gate-ink::after { animation: none; opacity: 1; }
  .gate-page main { transition: none; }
}

/* ---- ヘッダー（PC）は電話番号だけを見せ、説明はクリック後のポップアップで読ませる（11/6 クライアント回答） ---- */
.render-canvas .text-5ea4f { display: none; }
.render-canvas .group-b67a3 { align-self: center; }
.phone-popup__phone {
  font-family: var(--font-futura); font-size: 32px; font-weight: 500; letter-spacing: .02em; line-height: 1.2;
  color: var(--color-text-dark, #222);
}
.phone-popup__phone::before { content: '\260E'; font-size: 22px; margin-right: 8px; color: var(--color-purple); }
.phone-popup__title { font-size: 16px; }