@charset "utf-8";
/* ==========================================================================
   EMot オンラインチケット / PC表示レイアウト（pc-layout.css）
   --------------------------------------------------------------------------
   既存の style.css → style-color-02.css の "後ろ" に読み込む差分CSS。
   全ルールが @media (min-width:768px) の中にあるため、SP表示には一切影響しない。

   PC幅では、既存のSP画面を幅480pxの1本のカラムとして画面中央に置く。
   ヘッダー／本文／下層のタイトル帯／フッター／固定CTAをすべて同じ480px幅に揃え、
   上から下まで1本のカラムに見せる。

   読み込み順：style.css → style-color-02.css → pc-layout.css → pc-background.css
             （パネルありの画面のみ、最後に pc-guide-panel.css）
   ========================================================================== */

:root {
  /* 実測: SPレイアウトは 420〜480px までほぼ破綻しない。480px を既定とする */
  --pc-col: 480px;
  --pc-brand: #FDD000;

  /* 上部に固定する帯の高さ。この2つでコンテンツの開始位置が決まる */
  --pc-header-h: 64px;    /* SPヘッダー（63px + 下線1px） */
  --pc-titlebar-h: 52px;  /* 下層ページのタイトル帯 */

  /* 背景ビジュアル（色・装飾）は pc-background.css 側で定義している */
}

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

  /* ---------- 0. 本文が画面より短いとき、余白を可変にして画面いっぱいに ----------
     .content を flex で伸ばすことで、フッター／固定CTAの上の余白が可変になる。
     （固定/絶対配置の .header .menu .modal .page-bg はフローから外れるので影響なし） */
  html { height: 100%; }

  body.body {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
  }
  .content { flex: 1 0 auto; }
  .footer   { flex: 0 0 auto; }
  /* flex の子は margin:auto だと中身の幅まで縮むので、幅を明示してから
     max-width（カラム幅）で絞る。TOPなど中身の短い画面でカラム幅が揃わない対策 */
  .content,
  .footer { width: 100%; box-sizing: border-box; }

  /* ---------- 1. 全幅の下地 ---------- */
  /* 背景ビジュアルは pc-background.css に分離（白地） */
  body.body { padding-bottom: 0; }

  /* ---------- 2. ヘッダー：バーは全幅、中身だけカラム幅に寄せる ---------- */
  /* .header-btn / .language は position:absolute。__inner を relative にして
     ビューポート端ではなくカラム端に吸着させる（＝間延びの主因を潰す）      */
  .header {
    background-color: #fff;
    border-bottom: 1px solid #E0E0E0;
    box-shadow: 0 1px 4px rgba(0,0,0,.06);
  }
  .header__inner {
    position: relative;
    max-width: var(--pc-col);
    margin: 0 auto;
  }

  /* ---------- 3. コンテンツ：白いカラムとして自立させる ---------- */
  .content {
    max-width: var(--pc-col);
    margin: 0 auto;
    background-color: #fff;
    border-left: 1px solid #E0E0E0;
    border-right: 1px solid #E0E0E0;
    padding-bottom: 24px;
    /* 既定（TOPなど下層でない画面）＝固定ヘッダーの分だけ空ける */
    padding-top: var(--pc-header-h);
  }

  /* ---------- 3b. 下層ページ：タイトル帯を「戻る」ごと上部に固定する ----------
     SPでは .back-btn が position:fixed / left:15px の単独ピルで、
     スクロールしてもコンテンツの上に浮いたまま残る。PC幅ではこれが
     「タイトルと切り離された迷子のボタン」に見えてしまうため、
     PCでは タイトル + 戻る を1本の帯にまとめてヘッダー直下に固定する。
     帯の幅は全幅ではなく本体（カラム）と同じ480pxに揃える。            */
  .title-area:not(.width-full) {
    position: fixed;
    top: var(--pc-header-h);
    left: 50%;
    transform: translateX(-50%);
    width: var(--pc-col);
    z-index: 89;
    height: var(--pc-titlebar-h);
    padding: 0;
    background-color: #fff;
    /* 左右の罫線までカラムと揃えて、帯が本体の一部に見えるようにする */
    border-left: 1px solid #E0E0E0;
    border-right: 1px solid #E0E0E0;
    border-bottom: 1px solid #E0E0E0;
  }
  .title-area:not(.width-full) .title {
    line-height: var(--pc-titlebar-h);
  }

  /* 帯の中の「戻る」：帯の左端から15px、垂直中央。
     白帯の上では元の白いピルが消えてしまうので、枠なしのテキストリンクにする */
  .title-area:not(.width-full) .back-btn {
    position: absolute;
    top: 50%;
    left: 15px;
    transform: translateY(-50%);
    margin: 0;
    padding: 6px 8px 6px 20px;
    background-color: transparent;
    border-radius: 0;
    font-size: 12px;
    color: #4F4F4F;
  }
  .title-area:not(.width-full) .back-btn::before {
    left: 6px;
    border-top-color: #4F4F4F;
    border-left-color: #4F4F4F;
  }
  .title-area:not(.width-full) .back-btn:hover {
    color: #000;
    text-decoration: underline;
  }
  .title-area:not(.width-full) .back-btn:hover::before {
    border-top-color: #000;
    border-left-color: #000;
  }

  /* タイトル帯がある画面はその分だけコンテンツを下げる */
  body:has(.title-area:not(.width-full)) .content {
    padding-top: calc(var(--pc-header-h) + var(--pc-titlebar-h));
  }

  /* ---------- 4. 固定フッターCTA：バーは全幅、中身だけカラム幅 ---------- */
  /* 注: footer--fixed 系は <body> ではなく .footer 要素そのものに付く
     （全289画面を確認済み）。body側のクラスとして書くと空振りする。 */
  .footer.footer--fixed,
  .footer.footer--fixe1,
  .footer.footer--fixe2 { background-color: #fff; }

  .footer.footer--fixed .footer__inner,
  .footer.footer--fixe1 .footer__inner,
  .footer.footer--fixe2 .footer__inner,
  .footer.footer--fixed > .margin,
  .footer.footer--fixe1 > .margin,
  .footer.footer--fixe2 > .margin {
    max-width: var(--pc-col);
    margin-left: auto;
    margin-right: auto;
  }

  /* CTAバーに隠れないための下駄。:has() 非対応ブラウザを考慮する場合は
     body に .has-fixed-cta を付けて同じ値を当てる運用に置き換える。 */
  body:has(.footer--fixed) .content,
  body:has(.footer--fixe1) .content,
  body:has(.footer--fixe2) .content { padding-bottom: 96px; }

  /* ---------- 5. ページ最下部フッター：PCらしい全幅の帯にする ---------- */
  /* 固定CTAバー（.footer--fixed 系）は 4. で扱うため、ここでは必ず除外する。
     除外し忘れると CTAバーが暗い巨大ブロックになる。 */
  .footer:not(.footer--fixed):not(.footer--fixe1):not(.footer--fixe2) {
    position: static;
    background-color: #333333;
    padding: 28px 15px;
    min-height: 0;
  }
  .footer:not(.footer--fixed):not(.footer--fixe1):not(.footer--fixe2) .footer__bottom {
    color: #BDBDBD;
  }

  /* ---------- 6. メニュードロワー：アプリ（カラム）の左端から move in ---------- */
  /* 85.33% のままだと PC幅で 1000px超の巨大パネルになる */
  .menu {
    left: calc(50% - (var(--pc-col) / 2));   /* カラム左端を起点にする */
    width: min(360px, var(--pc-col));
    border-right: 1px solid #E0E0E0;
    box-shadow: 4px 0 16px rgba(0,0,0,.12);
    /* 閉じ状態：左へ100%退避＋全体を左側から切り抜く。
       transform と clip-path を同じ時間・同じイージングで動かすと、
       切り抜きの左端が常にカラム左端に一致し、カラムの外（背景側）には
       一切描画されないまま「カラム左端から出てくる」動きになる。     */
    transform: translateX(-100%);
    clip-path: inset(0 0 0 100%);
    transition-property: transform, clip-path;
    transition-duration: .3s;
    transition-timing-function: ease;
  }
  .body--menu-open .menu {
    transform: none;
    clip-path: inset(0 -24px 0 0);   /* 右側は影（box-shadow）が見えるよう少し広げる */
  }

  /* ---------- 6b. メニュー／モーダルの黒透過：アプリ（カラム）内だけに敷く ---------- */
  /* SPでは body 全体を覆う absolute。PCでは画面に固定し、カラム幅に限定する */
  .page-bg {
    position: fixed;
    top: 0;
    bottom: 0;
    left: 50%;
    right: auto;
    width: var(--pc-col);
    transform: translateX(-50%);
  }

  /* ---------- 7a. 「戻る」ボタン：position:fixed のためビューポート左端に張り付く ---------- */
  /* ＝開発側が指摘している「戻るの位置」問題の実体。カラム左端に付け直す */
  .back-btn { left: calc(50% - (var(--pc-col) / 2) + 15px); }

  /* ---------- 7b. 通知バー：全幅 fixed をカラム幅に収める ---------- */
  .notification {
    left: 50%;
    transform: translateX(-50%);
    width: var(--pc-col);
  }

  /* ---------- 7c. モーダル：カラム幅に収める ---------- */
  .modal {
    left: 50%;
    right: auto;
    width: min(var(--pc-col) - 40px, 440px);
    transform: translate(-50%, -50%);
  }

  /* ---------- 8. PC入力デバイス対応（SPには無い概念） ---------- */
  /* .button は <div> のため既定でカーソルが変わらない＝押せると分からない */
  .button,
  .link-list__item,
  .header-btn, .menu-btn, .language,
  .js-modal-trigger, .js-menu-btn, .js-close-modal-btn,
  .back-btn, .select, label { cursor: pointer; }

  .button:hover { opacity: .82; }
  .link-list__item:hover { background-color: #FFFBEA; }
  .back-btn:hover { text-decoration: underline; }

  /* キーボード操作の可視化。div ボタンには別途 tabindex/role の付与が必要 */
  .button:focus-visible,
  .link-list__item:focus-visible,
  .input:focus-visible,
  .select:focus-visible {
    outline: 3px solid #005BAC;
    outline-offset: 2px;
  }

}

/* ==========================================================================
   カラム幅への統一
   ヘッダー・ページ最下部フッター・固定CTAを、全幅の帯ではなく本文と同じ幅に揃える。
   ========================================================================== */
@media only screen and (min-width: 768px) {

  /* ---------- 1. ヘッダーを本文幅に揃える ---------- */
  /* 上の「2. ヘッダー」では全幅の白帯だったものを、カラムと同じ幅の「本体の頭」にする */
  .header {
    left: 50%;
    right: auto;
    transform: translateX(-50%);
    width: var(--pc-col);
    border-left: 1px solid #E0E0E0;
    border-right: 1px solid #E0E0E0;
    box-shadow: none;
  }
  /* ヘッダー・下層のタイトル帯も枠線込みで480pxにし、本文・CTAと左右の境界線の位置をそろえる
     （content-box のままだと 482px になり、境界線が1pxずつ外へずれる） */
  .header,
  .title-area:not(.width-full) { box-sizing: border-box; }

  /* ---------- 2. ページ最下部フッターを本文幅に揃える ---------- */
  .footer:not(.footer--fixed):not(.footer--fixe1):not(.footer--fixe2) {
    max-width: var(--pc-col);
    margin-left: auto;
    margin-right: auto;
    border-left: 1px solid #333333;
    border-right: 1px solid #333333;
  }

  /* ---------- 3. 固定CTAバーも本文幅に揃える ---------- */
  .footer.footer--fixed,
  .footer.footer--fixe1,
  .footer.footer--fixe2 {
    left: 50%;
    right: auto;
    transform: translateX(-50%);
    width: var(--pc-col);
    border-left: 1px solid #E0E0E0;
    border-right: 1px solid #E0E0E0;
  }
}