/* ============================================================
   bridge.css — pc.css + mb.css を 1HTMLに同居させるブリッジ
   2026-06-09 (CEO激怒対応: カンプ完全一致)

   方針:
   - mb-only マークアップ（.phone内の .m-hd / .m-bottom / .overlay / .drawer 等）はPCで非表示
   - pc-only マークアップ（.hd / .util / .side-rail / .ft / .to-top）はモバイルで非表示
   - body は通常スクロール（.phone の max-width:430px 中央寄せはモバイル時のみ）
   ============================================================ */

/* base reset — bodyのbackgroundをモバイル限定にしない */
body { background: var(--cream); }

/* === PC時（>=1100px）: mbマークアップを隠す === */
@media (min-width: 1100px) {
  /* mbレイヤー全消し */
  .m-util, .m-hd, .m-bottom, .m-ft, .overlay, .drawer { display: none !important; }
  /* PC時は .phone を解除（全幅レイアウト） */
  .phone {
    max-width: none !important;
    background: var(--cream);
    box-shadow: none !important;
    padding-bottom: 0 !important;
    overflow: visible !important;
  }
}

/* === Mobile時（<=1099px）: pcマークアップを隠す === */
@media (max-width: 1099px) {
  /* pcレイヤー全消し */
  .util, .hd, .side-rail, .ft, .to-top { display: none !important; }
  /* モバイル時の.phone ラッパー（カンプ準拠） */
  .phone {
    max-width: 430px;
    margin: 0 auto;
    background: var(--cream);
    min-height: 100vh;
    position: relative;
    box-shadow: 0 0 40px rgba(80,68,110,.14);
    padding-bottom: 76px;
    overflow: hidden;
  }
  body { background: #e9e4ef; }
}

/* === .pc-only / .mb-only クラス補助 === */
@media (max-width: 1099px) {
  .pc-only { display: none !important; }
}
@media (min-width: 1100px) {
  .mb-only { display: none !important; }
}

/* === 共通: 画像差し替え（.ph.photo の中の実画像表示） === */
.ph.photo img.real {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: inherit;
  z-index: 0;
}
.ph.photo img.real ~ span { z-index: 1; position: relative; opacity: 0; }
.ph.photo:has(img.real) { background: none; }

/* ============================================================
   2026-06-10 重要#4: サブページ mobile の 3-4段スタック解消
   utility bar (m-util) → header (m-hd) → H1 (m-subhero) の境界を強化
   カンプ準拠（クラス・色味）は維持しつつ、視覚階層だけ明瞭化
   ============================================================ */
@media (max-width: 1099px) {
  /* utility bar: ヘッダーに統合された情報帯として小さく一線に */
  .m-util{
    font-size: 10.5px !important;
    padding: 4px 16px !important;
    background: #f1ecf6 !important;            /* ヘッダーと明確に差をつける（淡い lavender） */
    color: #6a6280 !important;
    border-bottom: 1px solid #ddd5ea !important;
    letter-spacing: .02em;
    text-align: center;
  }
  /* ヘッダー: 白半透明 + 下境界を強くしてH1セクションと明確に分ける */
  .m-hd{
    background: rgba(255,255,255,.98) !important;
    border-bottom: 1px solid #ddd5ea !important;
    box-shadow: 0 2px 8px rgba(80,68,110,.06);
  }
  /* サブページの m-subhero: 直前 m-hd との間に呼吸 + 軽い背景差で「ここからコンテンツ」を明示 */
  .m-subhero{
    margin-top: 4px;
    padding-top: 22px !important;
  }
  /* TOPページの m-hero も同様の余白 */
  .m-hero{
    margin-top: 4px;
  }
  /* mobile breadcrumb: m-hd 直下に1行コンパクト表示・3段スタックを2段+本文に圧縮 */
  .m-crumb{
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 8px 16px;
    background: #fbf9f6;
    border-bottom: 1px solid #f0ebf4;
    font-size: 11px;
    color: #766f84;
    line-height: 1.3;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
  }
  .m-crumb a{ color: #8b7caa; text-decoration: none; }
  .m-crumb a:hover{ text-decoration: underline; }
  .m-crumb .sep{ color: #c8bedb; }
  .m-crumb [aria-current="page"]{ color: #4c4658; font-weight: 600; }
}
@media (min-width: 1100px) {
  .m-crumb{ display: none !important; }
}