@charset "utf-8";
/* ==========================================================================
   EMot オンラインチケット / PC表示の背景ビジュアル（pc-background.css）
   --------------------------------------------------------------------------
   emot.jp トップの「EMotでお出かけを楽しみましょう！」セクションの背景
   （見出しまわりの装飾・カラードット・町並み・人物）を白地に敷く。
   ※ 白地を採用（2026-10-07）。イエロー地と切り替えの仕組みは削除した。

   マークアップは pc-background.js が <body> 先頭に .emot-service として挿入する。
   本番は縦1780pxあり1画面に収まらないため、見出し〜カラードットを画面上寄せ、
   町並みまわりを画面下寄せにして固定している。写真サークルは使わない。
   ========================================================================== */

:root {
  /* 共通のアクセント色（emot.jp の装飾アセットから抽出した実測値） */
  --emot-yellow:    #F6D247;  /* イエロー */
  --emot-yellow-d:  #FDD000;  /* 濃イエロー */
  --emot-yellow-l:  #FCE45C;  /* 淡イエロー */
  --emot-green:     #00A040;
  --emot-cyan:      #0096E0;
  --emot-cyan-l:    #6FD2F5;
  --emot-coral:     #F5928A;
}

/* 背景レイヤーは PC 幅のときだけ出す（SP表示には一切影響させない） */
.emot-service { display: none; }

@media only screen and (min-width: 768px) {

  /* ======================================================================
     背景 = emot.jp「EMotでお出かけを楽しみましょう！」セクション
     本番は幅1100pxのコンテンツ枠（1440px時 左170px）基準。ここでは幅1440の
     ステージに置き直し、--u（本番の1px）で拡縮する。高さも収まるよう
     幅・高さの小さい方に合わせる（contain）。
     各数値は本番CSS（.pg_home__c .section03 ...）の 1440px 時の実測値。
     ====================================================================== */
  html { background-color: #FFFFFF; }
  body { background-color: transparent; }

  .emot-service {
    display: block;
    position: fixed;
    inset: 0;
    z-index: -1;
    overflow: hidden;
    pointer-events: none;
    background-color: #FFFFFF;
  }
  .emot-service { --u: min(0.0694444vw, 0.1075269vh); }   /* 100vw/1440, 100vh/930 */
  .emot-service img { display: block; width: 100%; height: auto; }
  .emot-service__top,
  .emot-service__bottom,
  .emot-service__people {
    position: absolute;
    left: 50%;
    width: calc(1440 * var(--u));
    transform: translateX(-50%);
    isolation: isolate;
  }
  .emot-service__top    { top: 0;    height: calc(1200 * var(--u)); }
  /* 人物は最前面（上寄せの装飾・下寄せの装飾のどちらよりも上）。座標系は __top と同じ */
  .emot-service__people { top: 0; height: calc(1200 * var(--u)); z-index: 10; }
  .emot-service__bottom { bottom: 0; height: calc(600 * var(--u)); }
  .emot-service__top > img,
  .emot-service__bottom > img,
  .emot-service__people > img { position: absolute; }

  /* 上寄せ：見出しまわり（人物・ドットの軌跡）＋カラードット */
  .emot-service__ttl03 { z-index: 1; top: 0;                     left: calc(23 * var(--u));  width: calc(1534 * var(--u)) !important; }
  /* 人物4組（本番の btoc_service_decoration_02 を1組ずつ切り出したもの）
     位置・大きさはデザイン指示（2026-10-05 配置イメージ）に合わせている。
     .emot-service__people（最前面レイヤー）に入れ、ほかの装飾に被さらせない。
     下の2組（自撮り・アイス）はアプリ領域（1280px幅時の480pxカラム
     ≒ ステージ上 422〜1018）にかからない位置。本番比の倍率をコメントに記載。 */
  .emot-service__person-businessman { z-index: 2; top: calc(138 * var(--u)); left: calc(244 * var(--u));  width: calc(57.5 * var(--u)) !important; }  /* 本番比 約1.6倍 */
  .emot-service__person-family      { z-index: 2; top: calc(62 * var(--u));  left: calc(1069 * var(--u)); width: calc(208 * var(--u)) !important; }   /* 約1.8倍 */
  .emot-service__person-selfie      { z-index: 2; top: calc(490 * var(--u)); left: calc(315 * var(--u));  width: calc(88 * var(--u)) !important; }    /* 約1.5倍 */
  .emot-service__person-icecream    { z-index: 2; top: calc(432 * var(--u)); left: calc(1032 * var(--u)); width: calc(88.6 * var(--u)) !important; }  /* 約1.1倍 */
  .emot-service__ttl01 { z-index: 3; top: calc(104 * var(--u));  left: calc(173 * var(--u)); width: calc(1100 * var(--u)) !important; }
  .emot-service__intro { z-index: 1; top: calc(621 * var(--u));  left: calc(9 * var(--u));   width: calc(1504 * var(--u)) !important; }

  /* 下寄せ：ドット・円＋町並み */
  .emot-service__ticket01 { z-index: 1; bottom: calc(-106 * var(--u)); left: calc(33 * var(--u)); width: calc(1430 * var(--u)) !important; }

}