/**
 * motobucho pc-layout.css — ver04
 * PC 2-column layout (≥1200px): left=main content / right=sidebar
 * スマホ(≤430px)は一切変更しない
 */

/* ===== Base: PC-only sidebars hidden on mobile ===== */
.pc-left,
.pc-right { display: none; }

/* ===== PC layout (≥1200px) ===== */
@media (min-width: 1200px) {

  /* ── body: フラットなライトグレー背景 ── */
  body {
    max-width: none !important;
    background: #F4F7FB !important;
  }
  body::before { display: none; }

  /* ── 2カラムグリッドラッパー ── */
  .pc-wrap {
    display: grid;
    grid-template-columns: 1fr 260px;
    gap: 0 16px;               /* 左右カラム間のみ余白 */
    max-width: 1280px;
    margin: 0 auto;
    padding: 0;
    min-height: 100vh;
    align-items: start;
    position: relative;
    z-index: 1;
  }

  /* ── tab-bar / sub-bar はPC時非表示 ── */
  .tab-bar { display: none !important; }
  .sub-bar { display: none !important; }
  .feed    { background: #F4F7FB; padding: 20px 15px; }

  /* ── 旧・左スポンサーサイドバー: 非表示 ── */
  .pc-left { display: none !important; }

  /* ── メインカラム ── */
  .pc-main {
    background: #F4F7FB;
    box-shadow: none;
    min-height: 100vh;
    position: relative;
    /* z-index を auto にしてCTAセクションがサイドバーより前面に出られるようにする */
  }

  /* ── 右サイドバー ── */
  .pc-right {
    display: flex !important;
    flex-direction: column;
    overflow: hidden;
    padding: 0;
    position: sticky;
    top: 52px;
    height: calc(100vh - 52px);
    background: #fff;
    border-left: 0.5px solid #e0e8f0;
  }

  /* ── 右サイドバー: スポンサー枠 ── */
  .pc-side-sponsors {
    padding: 12px 10px 8px;
    border-bottom: 0.5px solid #e0e8f0;
    flex-shrink: 0;
  }
  .pc-side-label {
    font-size: 13px; font-weight: 700;
    color: #6b7a8d; letter-spacing: .5px;
    margin-bottom: 8px;
  }
  .pc-side-sp-card {
    background: #F4F7FB; border-radius: 9px;
    padding: 8px 10px; display: flex; align-items: center; gap: 8px;
    margin-bottom: 6px; cursor: pointer;
    border: 0.5px solid #e0e8f0;
  }
  .pc-side-sp-card.gold {
    background: #FFFEF5; border: 1.5px solid #C8A800;
  }
  .pc-side-sp-icon {
    font-size: 20px; width: 32px; height: 32px;
    border-radius: 8px; background: rgba(0,0,0,.05);
    display: flex; align-items: center; justify-content: center; flex-shrink: 0;
  }
  .pc-side-sp-name { font-size: 13px; font-weight: 700; color: #1a1a2e; }
  .pc-side-sp-cat  { font-size: 13px; color: #6b7a8d; margin-top: 1px; }

  /* ── 右サイドバー: バナー枠 ── */
  .pc-side-banner {
    padding: 8px 10px;
    border-bottom: 0.5px solid #e0e8f0;
    flex-shrink: 0;
  }
  .pc-side-banner .sp-banner {
    border-radius: 10px; margin: 0; font-size: 13px;
    text-decoration: none; display: flex; align-items: center; gap: 10px;
    padding: 10px 12px;
  }
  .pc-side-banner .sp-ttl { font-size: 13px; }

  /* ── チャットパネル ── */
  .pc-chat {
    background: #fff; border-radius: 0; overflow: hidden;
    display: flex; flex-direction: column;
    flex: 1; min-height: 0; box-shadow: none;
  }
  .pc-chat-hdr {
    background: linear-gradient(135deg, #023E8A, #0077B6);
    padding: 14px 16px;
    display: flex; align-items: center; gap: 10px;
    flex-shrink: 0;
  }
  .pc-chat-av {
    width: 34px; height: 34px; border-radius: 50%;
    background: linear-gradient(135deg, #FFD166, #EF8C4B);
    display: flex; align-items: center; justify-content: center; font-size: 16px;
  }
  .pc-chat-nm { color: #fff; font-size: 13px; font-weight: 700; }
  .pc-chat-st { font-size: 13px; color: #90E0EF; }
  .pc-chat-body {
    flex: 1; overflow-y: auto; padding: 12px;
    display: flex; flex-direction: column; gap: 10px;
  }
  .pc-chat-body::-webkit-scrollbar { width: 4px; }
  .pc-chat-body::-webkit-scrollbar-thumb { background: #dde3ee; border-radius: 2px; }
  .pc-msg   { display: flex; gap: 7px; }
  .pc-msg.u { flex-direction: row-reverse; }
  .pc-mav {
    width: 26px; height: 26px; border-radius: 50%;
    background: linear-gradient(135deg, #FFD166, #EF8C4B);
    display: flex; align-items: center; justify-content: center;
    font-size: 13px; flex-shrink: 0; align-self: flex-end;
  }
  .pc-msg.u .pc-mav { background: #023E8A; color: #fff; font-size: 13px; font-weight: 700; }
  .pc-bubble {
    max-width: 85%; background: #f0f4f8;
    border-radius: 14px; border-bottom-left-radius: 3px;
    padding: 9px 12px; font-size: 13px; line-height: 1.7; color: #1a1a2e;
  }
  .pc-msg.u .pc-bubble {
    background: #023E8A; color: #fff;
    border-bottom-left-radius: 14px; border-bottom-right-radius: 3px;
  }
  .pc-choices { display: flex; flex-direction: column; gap: 5px; margin-top: 7px; }
  .pc-choice {
    background: #fff; border: 1.5px solid #0077B6; color: #0077B6;
    border-radius: 12px; padding: 7px 12px;
    font-size: 13px; font-weight: 700; cursor: pointer;
    font-family: inherit; text-align: left; transition: all .15s;
  }
  .pc-choice:hover { background: #0077B6; color: #fff; }
  .pc-typing { display: flex; gap: 3px; padding: 3px 0; }
  .pc-typing span {
    width: 6px; height: 6px; border-radius: 50%;
    background: #6b7a8d; animation: bn 1.1s infinite;
  }
  .pc-typing span:nth-child(2) { animation-delay: .18s; }
  .pc-typing span:nth-child(3) { animation-delay: .36s; }
  .pc-chat-in {
    display: flex; gap: 7px; padding: 10px 12px;
    border-top: 1px solid #eee; flex-shrink: 0;
  }
  .pc-chat-input {
    flex: 1; border: 1.5px solid #dde3ee; border-radius: 15px;
    padding: 8px 12px; font-size: 13px; outline: none; font-family: inherit;
  }
  .pc-chat-input:focus { border-color: #0077B6; }
  .pc-chat-send {
    width: 32px; height: 32px; border-radius: 50%;
    background: #0077B6; border: none; color: #fff; cursor: pointer; font-size: 13px;
  }

  /* ── スマホ用 FAB・チャット非表示 ── */
  .fab-wrap, .cp { display: none !important; }

  /* ── フッター: 全幅・横パディングでコンテンツを1280pxグリッドに揃える ── */
  .footer,
  .site-footer {
    padding-left:  calc((100vw - 1280px) / 2 + 20px);
    padding-right: calc((100vw - 1280px) / 2 + 20px);
  }

  /* ── 詳細ヒーロー内 hero-back: PC ではナビヘッダーがあるので非表示 ── */
  .hero-back { display: none !important; }

  /* ── 詳細ページ共通コンテナ ── */
  .sh-body { padding: 0 28px 40px; }

  /* ── 固定ページ: pc-mainの1fr全幅を使う（max-widthなし） ── */
  .page-body {
    padding: 24px 28px;
  }

  /* ── フィード内バナーはPC時非表示（右サイドバーで表示）── */
  .feed .sp-banner { display: none !important; }

  /* ── メインのスポンサーセクションはPC時非表示（右サイドバーで表示）── */
  .sponsor-wrap { display: none !important; }

  /* ══════════════════════════════════════════════
     CTA セクション: .pc-wrap の外に出したので自然に全幅
     max-width: 1280px に揃えるため中央寄せ内部パディングを調整
  ══════════════════════════════════════════════ */
  .cta-wrap {
    padding-top:    52px;
    padding-bottom: 52px;
  }
  /* タイトル・サブテキスト・ボタンをPC向けに拡大 */
  .cta-ttl { font-size: 22px; margin-bottom: 10px; }
  .cta-sub { font-size: 15px; margin-bottom: 24px; }
  .cta-btn { font-size: 15px; padding: 14px 40px; }

  /* ══════════════════════════════════════════════
     PC フォントサイズ全体拡大
     スマホ(px直定義)をPC向けに+2〜3px拡張
     最小フォント: 14px
  ══════════════════════════════════════════════ */

  /* ─ カード（グリッド） */
  .card-name                    { font-size: 15px; }
  .card-cat, .card-sub          { font-size: 14px; }

  /* ─ ワイドカード（横型） */
  .cw-name                      { font-size: 16px; }
  .cw-cat, .cw-sub              { font-size: 14px; }

  /* ─ 求人・宿泊・暮らし カード */
  .job-ttl, .stay-name, .life-name { font-size: 16px; }
  .job-co                       { font-size: 14px; }
  .job-pay                      { font-size: 17px; }
  .stay-price                   { font-size: 16px; }
  .stay-sub, .life-cat, .life-sub  { font-size: 14px; }

  /* ─ イベントカード・タイムライン */
  .ev-ttl                       { font-size: 15px; }
  .ev-sub                       { font-size: 14px; }
  .tl-ttl                       { font-size: 16px; }
  .tl-sub                       { font-size: 14px; }

  /* ─ フィルターチップ・件数 */
  .chip, .sub-chip              { font-size: 14px; }
  .list-count, .list-sort       { font-size: 14px; }

  /* ─ PCでも最小 14px（バッジ・ラベル類を底上げ） */
  .pr-tag, .card-tag, .ev-tag,
  .pr-pill, .job-type, .tl-tag,
  .sp-label, .sp-cat, .sp-gold,
  .notice-date, .sec-more       { font-size: 14px; }
  .hero-tag, .hero-chip         { font-size: 14px; }
  .ft-col h4, .ft-col a         { font-size: 14px; }

  /* ─ セクションタイトル（TOPページ用） */
  .sec-ttl                      { font-size: 18px; }

  /* ─ 詳細ページ内セクションタイトル */
  .sec .sec-ttl                 { font-size: 18px; }

  /* ─ 詳細ページ 基本情報 */
  .ii-lbl                       { font-size: 14px; }
  .ii-val                       { font-size: 15px; }

  /* ─ コメント・タグ・近くのおすすめ */
  .c-text                       { font-size: 15px; }
  .nearby-name                  { font-size: 15px; }
  .nearby-cat                   { font-size: 14px; }
  .tag-cloud span               { font-size: 14px; }

  /* ─ 店舗・スポット・宿泊・暮らし タイトル */
  .shop-name, .spot-name,
  .d-name, .life-d-name         { font-size: 24px; }

  /* ─ キャッチコピー */
  .shop-catch, .spot-catch,
  .d-catch, .life-d-catch       { font-size: 15px; }

  /* ─ イベント・求人 詳細タイトル */
  .ev-ttl-d                     { font-size: 22px; }
  .jd-ttl, .jd-pay              { font-size: 22px; }

  /* ─ お知らせ・情報カード */
  .notice-item                  { font-size: 14px; padding: 20px 13px; }
  .tip-text                     { font-size: 14px; }

  /* ─ 固定ページ本文（お問い合わせ・プライバシー等） */
  .page-body p, .page-body li   { font-size: 16px; }
  .page-body h2                 { font-size: 18px; }

  /* ─ TOPページ ヒーロー（全幅メインビジュアル） */
  .hero-ttl                     { font-size: 46px; line-height: 1.3; margin-bottom: 28px; }
  .hero-tag                     { font-size: 12px; letter-spacing: 2.5px; margin-bottom: 20px; }
  .hero-chips                   { gap: 14px; flex-wrap: nowrap; }
  .hero-chip                    { font-size: 15px; padding: 10px 24px; border-radius: 24px; }

  /* ─ CTA */
  .cta-sub                      { font-size: 15px; }

  /* ─ アクションボタン */
  .act-lbl  { font-size: 14px; }
  .act-icon { font-size: 26px; margin-bottom: 6px; }
  .act-btn  { padding: 16px 10px; }

  /* ─ 地図・アクセス */
  .map-box         { height: auto; }
  .map-box iframe  { height: 360px !important; }
}