@charset "utf-8";
/* ==========================================================================
   EMot オンラインチケット / PC表示の利用ガイドパネル（pc-guide-panel.css・リリース2）
   --------------------------------------------------------------------------
   pc-layout.css → pc-background.css の "後ろ" に読み込む差分CSS（パネルありの画面のみ）。
     ・画面左上に EMot ロゴ（.pc-corner-logo）
     ・アプリ画面（480pxカラム）の右隣に、利用ガイドのパネル（.pc-aside--guide）
         ご購入からご利用までの流れ／ご利用にはスマートフォンが必要です（QR）
     ・左側に背景の人物イラスト3体（家族・アイスのカップル・自撮りのカップル）
   2026-10-13：パネルを右に置く形に決定。パネルは補足情報なので、本文（アプリ画面）を
   読んだあとに視線が流れる右側に置く。
   幅 1240px 未満ではロゴ・パネルとも畳んでリリース1と同じ見た目に戻る。
   SP表示には一切影響しない。
   ========================================================================== */

:root {
  --panel-aside-w: 320px;   /* パネルの幅（余白込み） */
  --panel-aside-gap: 24px;  /* アプリ画面とパネルの間隔 */
  --panel-pad-x: 24px;      /* パネル内の左右余白 */
  --panel-logo-w: 160px;    /* 画面左上ロゴの幅（200px から20%縮小。画像は 480×272） */
  --panel-logo-top: 16px;
  --panel-logo-left: 24px;
}

/* SPではロゴ・パネルを出さない（PC専用の要素） */
.pc-aside,
.pc-corner-logo { display: none; }

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

  /* ---------- 画面左上のロゴ ---------- */
  .pc-corner-logo {
    display: block;
    position: fixed;
    top: var(--panel-logo-top);
    left: var(--panel-logo-left);
    width: var(--panel-logo-w);
    z-index: 1;
  }
  .pc-corner-logo img { display: block; width: 100%; height: auto; }

  /* ---------- 利用ガイドのパネル（アプリ画面の右隣・上下中央） ----------
     本文はふつうにスクロールするので、パネルは position:fixed で画面の上下中央に置いたままにする。
     カラム幅を基準に外側へ配置するので、--pc-col を変えても崩れない。
     不透明の白い面（影・ぼかしなし）。                                       */
  .pc-aside {
    display: flex;
    flex-direction: column;
    gap: 44px;   /* セクション間（流れ／QR／注意）の間隔。22px では詰まって見えるため倍に */
    position: fixed;
    /* 画面の上下中央 */
    top: 50%;
    transform: translateY(-50%);
    max-height: 100vh;
    overflow: auto;
    left: calc(50% + (var(--pc-col) / 2) + var(--panel-aside-gap));
    width: var(--panel-aside-w);
    box-sizing: border-box;
    padding: 22px var(--panel-pad-x);
    background-color: #FFFFFF;
    border-radius: 16px;
    z-index: 1;
    font-size: 13px;
    line-height: 1.7;
    color: #333333;
  }

  /* --- パネル見出し --- */
  .pc-aside__title {
    margin: 0 0 14px;
    font-size: 16px;   /* 本文の太字（14px）と差をつけるため 14px → 16px */
    line-height: 1.5;
    font-weight: 700;
    padding-bottom: 8px;
    border-bottom: 2px solid #FDD000;
  }

  /* --- ご購入からご利用までの流れ（3ステップ） --- */
  .pc-steps { list-style: none; margin: 0; padding: 0; counter-reset: s; }
  .pc-steps li {
    position: relative;
    padding: 0 0 18px 38px;
    counter-increment: s;
    font-size: 13px;
    color: #4F4F4F;
  }
  .pc-steps li::before {
    content: counter(s);
    position: absolute; left: 0; top: 0;
    width: 26px; height: 26px; border-radius: 50%;
    background-color: #E0E0E0; color: #fff;
    font-weight: 700; font-size: 13px; line-height: 26px; text-align: center;
  }
  .pc-steps li::after {
    content: ""; position: absolute; left: 12.5px; top: 26px; bottom: 4px;
    width: 1px; background-color: #E0E0E0;
  }
  .pc-steps li:last-child { padding-bottom: 0; }
  .pc-steps li:last-child::after { display: none; }
  .pc-steps li b { display: block; color: #333333; font-size: 14px; }
  .pc-steps li.is-current::before { background-color: #FDD000; color: #000; }

  /* --- ご利用にはスマートフォンが必要です（QR） --- */
  .pc-handoff { display: flex; gap: 12px; align-items: flex-start; }   /* テキストはQRの上端にそろえる */
  .pc-qr {
    width: 104px; height: 104px; border-radius: 8px; background-color: #fff;
    border: 1px solid #E0E0E0; display: grid; place-items: center;
    font-size: 10px; color: #828282; text-align: center; flex: 0 0 104px;
  }
  .pc-qr img { width: 100%; height: 100%; display: block; }
  .pc-handoff__text { font-size: 12px; color: #4F4F4F; margin: 0; }
}

/* ==========================================================================
   背景イラスト（パネルありの画面だけの上書き。座標は pc-background.css と同じ --u 単位）
     右側（パネル側）：人物は出さず、ドット模様などの装飾だけを残す
     左側：家族・アイスのカップル・自撮りのカップルの3体
           （ステージ幅1440で、パネルなしの右側配置を左右反転した位置 x → 1440 − x − 幅）
           左上の家族はアプリ画面の方を向くよう絵も左右反転
   ========================================================================== */
@media only screen and (min-width: 1240px) {
  .emot-service__person-businessman { display: none !important; }
  .emot-service__person-family   { left: calc(163 * var(--u)); transform: scaleX(-1); }   /* 1440 − 1069 − 208 */
  .emot-service__person-icecream { left: calc(319.4 * var(--u)); }                        /* 1440 − 1032 − 88.6 */
  .emot-service__person-selfie   { top: calc(600 * var(--u)); left: calc(142 * var(--u)); } /* 1440 − 1210 − 88 */
}