/* ==========================================================================
   estimate-pc.css — 見積もりシミュレーションページ (estimate.html) の PC・横長画面用
   <link media="(min-width: 1024px)"> で読み込む。方針は common-pc.css の冒頭を参照。

   2列にする。
   - 左 … 手順（撮影メニュー → 日付 → 時間 → オプション → 予約へ）。.es-main で包み、
          スマホ版の寸法（390px幅）で組んだまま 1.35倍にする（カレンダーやカードの座標をそのまま使うため）
   - 右 … 「選択中」バー（.es-bar-stage）。画面の上に付いてきて、フッターの手前で止まる
          （止まる位置は estimate.js の positionBar が書く）
   ========================================================================== */

.estimate-page {
  --es-zoom: 1.35;
  --es-main-w: calc(390px * 1.35);   /* 左の列の見た目の幅 */
  --es-side-w: 390px;                /* 右の列の幅 */
  --es-gap: 64px;
  /* 2列をまとめて中央に置いたときの、左の列の左端 */
  --es-left: max(var(--pc-gutter), calc((100% - var(--es-main-w) - var(--es-gap) - var(--es-side-w)) / 2));
}

/* =============== 左の列 =============== */
.es-main {
  display: block;
  position: relative;
  width: var(--es-main-w);
  margin-left: var(--es-left);
  padding-bottom: 10px;
  /* 背景の絵柄（縦2822px）が中身より長く、ページの下にはみ出すので縦だけ切る */
  overflow-x: visible;
  overflow-y: clip;
}
/* 入れ物ではなく中身を拡大する（拡大した要素の中では % や max() の位置計算がずれるため） */
.es-main > * { zoom: var(--es-zoom); }

/* =============== 右の列（選択中バー） =============== */
.es-bar-stage {
  top: calc(var(--pc-header-h) + 150px);
  left: calc(var(--es-left) + var(--es-main-w) + var(--es-gap));
  width: var(--es-side-w);
  z-index: 5;
}
/* スマホ版は「画面の下から」張り付く位置を estimate.js が書き込む。PC では画面の上に付ける */
.es-bar-sticky {
  top: calc(var(--pc-header-h) + 40px) !important;
}

.es-bar {
  width: 100%;
  padding: 26px 22px 30px;
  border-radius: 28px;
  background: rgba(255, 255, 255, 0.9);
  box-shadow: 0 6px 24px rgba(0, 0, 0, 0.08);
}
/* PC では明細を常に広く見せられるので、カードの上に並べる */
.es-bar__list {
  width: 100%;
  max-height: 320px;
  margin-bottom: 18px;
  box-shadow: none;
  border-color: #eee6d8;
}
.es-bar__item { font-size: 14px; }
.es-bar__head,
.es-bar__card { width: 100%; }
.es-bar__label,
.es-bar__back,
.es-bar__toggle { font-size: 13px; }
.es-bar__head { height: 26px; }
.es-bar__back,
.es-bar__toggle { height: 26px; line-height: 24px; }
.es-bar__card {
  margin-top: -8px;
}
/* 右の列は幅に余裕があるので、プラン名や日時は省略せず折り返す */
.es-bar__card { height: auto; min-height: 60px; padding-top: 10px; padding-bottom: 10px; }
.es-bar__name { font-size: 16px; white-space: normal; overflow: visible; }
.es-bar__name--long { font-size: 14px; }
.es-bar .es-summary__yen { font-size: 14px; }
.es-bar .es-summary__num { font-size: 24px; }
.es-bar .es-summary__tax { font-size: 10px; }

/* 狭めの PC では右の列を少し細く */
@media (max-width: 1279px) {
  .estimate-page {
    --es-side-w: 340px;
    --es-gap: 40px;
  }
}

.estimate-page .footer {
  margin-top: 150px;
  /* スマホ版は画面下に固定したバーのぶん下を空けている（estimate.css）。PC ではバーが横にあるので、他のページと同じに戻す */
  padding-bottom: calc(110px + var(--footer-object-gap));
}