/*
 * 入荷情報の記事（車の項目がある記事）の見た目。templates/single-car.php と includes/shortcodes.php のクラス（mbc-…）に当てる。
 * 色は新しいトップと同じ：茶 #3B302A・濃い茶 #1C1410・オレンジ #C65A1E・薄いオレンジ #FBE8DA・地 #FAF6F1。
 * スマホの区切りは 767px（Elementor と同じ）。完成見本：画用紙の「ブログ記事・入荷情報 PC／スマホ」。
 * 注意：このファイルは WordPress のプラグインのファイルとして読み込まれるので、ConoHa の WAF の「CSS の説明書き」の問題は起きない
 * （WAF が止めるのは、管理画面から送る中身に説明書きがある時）。
 */

/* ---- ページ全体 ---- */
body.mbc-page { margin: 0; background: #FAF6F1; color: #3B302A; font-family: "Noto Sans JP", sans-serif; -webkit-font-smoothing: antialiased; }
body.mbc-page a { color: #C65A1E; }
body.mbc-page img { max-width: 100%; height: auto; }
.grecaptcha-badge { visibility: hidden; }

/* ---- 上の帯 ---- */
/* テーマの古いページ（includes/site-chrome.php が上下を差し替えるページ）でも同じ字になるよう、上下だけ字を決める（0.12.0） */
.mbc-header, .mbc-footer { font-family: "Noto Sans JP", sans-serif; line-height: 1.6; }
.mbc-header { background: #fff; box-shadow: 0 1px 0 #EFE4DA; position: sticky; top: 0; z-index: 20; }
.admin-bar .mbc-header { top: 32px; }
.mbc-header-in { max-width: 1200px; margin: 0 auto; padding: 0 40px; min-height: 84px; display: flex; align-items: center; gap: 16px; }
.mbc-brand { display: flex; align-items: center; gap: 16px; text-decoration: none; color: #3B302A !important; }
.mbc-logo { width: 150px; height: auto; display: block; }
.mbc-brand-name { font-weight: 900; font-size: 22px; letter-spacing: .06em; padding-left: 16px; box-shadow: inset 1px 0 0 #E2D5C9; }
.mbc-menu { margin-left: auto; display: flex; gap: 24px; }
.mbc-menu a { font-weight: 700; font-size: 15px; color: #3B302A !important; text-decoration: none; }
.mbc-menu a:hover, .mbc-menu a.is-current { color: #C65A1E !important; }
.mbc-chips-nav { display: none; }

/* ---- 本文の幅 ---- */
.mbc-main { max-width: 900px; margin: 0 auto; padding: 32px 24px 8px; }

/* 写真（人が入れる記事の本文） */
.mbc-photos { border-radius: 14px; overflow: hidden; }
.mbc-photos > *:first-child { margin-top: 0; }
.mbc-photos figure { margin: 0 0 8px; }
.mbc-photos img { display: block; width: 100%; }
.mbc-photos p:empty { display: none; }

/* 写真は横にめくる（0.9.0。前島さん「全部表示されると面積を取りすぎる。スクロール出来るギャラリー」）。
   WordPress のギャラリーは折り返して並べる作りなので、1列に並べ直して、1枚ずつ止まるようにする。
   :not(#individual-image) は WordPress の元の指定（同じ強さ）に勝つため */
.mbc-slider { position: relative; }
.mbc-photos .wp-block-gallery.has-nested-images { display: flex; flex-wrap: nowrap; gap: 0; margin: 0; overflow-x: auto; scroll-snap-type: x mandatory; scroll-behavior: smooth; scrollbar-width: none; }
.mbc-photos .wp-block-gallery.has-nested-images::-webkit-scrollbar { display: none; }
.mbc-photos .wp-block-gallery.has-nested-images figure.wp-block-image:not(#individual-image) { flex: 0 0 100%; width: 100%; margin: 0; scroll-snap-align: start; aspect-ratio: 4 / 3; background: #000; }
.mbc-photos .wp-block-gallery.has-nested-images figure.wp-block-image:not(#individual-image) img { width: 100%; height: 100%; object-fit: contain; }
/* 左右の矢印（0.9.3。前島さん「もっとわかりやすいのに」）：濃い丸に太い白い矢印。明るい写真・暗い写真のどちらでも見える。
   端では出さない（押せそうに見えて押せないのは迷うため） */
.mbc-slider-btn { position: absolute; top: 50%; transform: translateY(-50%); display: flex; align-items: center; justify-content: center; width: 56px; height: 56px; padding: 0; border: 2px solid rgba(255,255,255,.85); border-radius: 50%; background: rgba(28,20,16,.78); cursor: pointer; box-shadow: 0 3px 10px rgba(0,0,0,.35); }
.mbc-slider-btn svg { width: 28px; height: 28px; }
.mbc-slider-btn:hover { background: rgba(28,20,16,.92); }
.mbc-slider-btn[hidden] { display: none; }
.mbc-slider-prev { left: 12px; }
.mbc-slider-next { right: 12px; }
.mbc-slider-count { position: absolute; right: 12px; bottom: 12px; background: rgba(0,0,0,.65); color: #fff; font-size: 14px; font-weight: 700; padding: 4px 12px; border-radius: 14px; }
/* スマホだけ：「指でめくれます」（1回めくったら消える。gallery.js） */
.mbc-slider-hint { display: none; margin: 8px 0 0; text-align: center; font-size: 13px; font-weight: 700; color: #6B5D55; }

/* 写真の下の「動画と360°で、車の中まで見られます ↓」の帯（0.9.3）。審査のボタン（オレンジ）と取り違えないよう、白地に茶色 */
.mbc-jump { display: flex; align-items: center; justify-content: center; gap: 10px; margin-top: 16px; padding: 14px 16px; border: 2px solid #3B302A; border-radius: 12px; background: #fff; color: #3B302A !important; font-weight: 900; font-size: 16px; text-decoration: none; }
.mbc-jump:hover { background: #F4EEE9; }
.mbc-jump-arrow { font-size: 20px; }
#mbc-movie { scroll-margin-top: 80px; }
html { scroll-behavior: smooth; }

/* 360°のツアー（動画の欄の下）。見出しの .mbc-h3（濃い茶色）はこの下で決めているので、2つ重ねて白にする */
.mbc-h3.mbc-h3-light { color: #fff; }
.mbc-tours { display: grid; gap: 16px; }
.mbc-tour { border-radius: 12px; overflow: hidden; }

/* 札・日付・題名 */
.mbc-head { margin-top: 24px; }
.mbc-head-tags { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.mbc-tag { display: inline-flex; align-items: center; height: 26px; padding: 0 10px; border-radius: 5px; font-weight: 900; font-size: 12px; text-decoration: none; }
.mbc-tag-cat { background: #C65A1E; color: #fff !important; }
.mbc-tag-store { background: #fff; border: 1px solid #EFE4DA; color: #3B302A; font-weight: 700; }
.mbc-date { font-family: "Montserrat", sans-serif; font-weight: 700; font-size: 13px; color: #8A7A70; }
.mbc-title { margin: 12px 0 0; font-weight: 900; font-size: 34px; line-height: 1.35; color: #3B302A; }

/* 区切りと見出し */
.mbc-gap { margin-top: 18px; }
.mbc-gap-s { margin-top: 12px; }
.mbc-boxes { margin-top: 20px; }
.mbc-note { margin: 8px 0 0; font-size: 12px; color: #8A7A70; text-align: center; }
.mbc-section { margin-top: 48px; }
.mbc-section-tight { margin-top: 32px; }
.mbc-en { margin: 0; font-family: "Montserrat", sans-serif; font-weight: 900; font-size: 13px; letter-spacing: .28em; color: #C65A1E; }
.mbc-h2 { margin: 8px 0 0; font-weight: 900; font-size: 30px; line-height: 1.4; color: #3B302A; }
.mbc-h3 { margin: 0; font-weight: 900; font-size: 20px; color: #3B302A; }

/* ---- 4つのます ---- */
.mbc-boxes { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; }
.mbc-box { background: #fff; border-radius: 10px; padding: 14px 16px; }
.mbc-box-label { font-size: 12px; color: #8A7A70; font-weight: 700; }
.mbc-box-value { font-size: 19px; font-weight: 900; color: #3B302A; margin-top: 2px; }

/* ---- 審査・LINE・電話のボタン ---- */
.mbc-contact { display: grid; grid-template-columns: 2fr 1fr 1fr; gap: 10px; }
.mbc-btn { display: flex; align-items: center; justify-content: center; text-align: center; min-height: 58px; padding: 8px 12px; border-radius: 10px; font-weight: 900; text-decoration: none; line-height: 1.4; box-sizing: border-box; }
.mbc-btn-apply { background: linear-gradient(135deg, #E07A35, #C65A1E 55%, #A2481A); color: #fff !important; font-size: 18px; box-shadow: 0 8px 22px rgba(198, 90, 30, .35); }
.mbc-btn-line { background: #06C755; color: #fff !important; font-size: 14px; }
.mbc-btn-tel { background: #3B302A; color: #fff !important; font-size: 14px; font-family: "Montserrat", "Noto Sans JP", sans-serif; }

/* ---- 記事の文とセールスポイント ---- */
.mbc-article p { font-size: 16px; line-height: 1.95; color: #3B302A; margin: 0 0 12px; }
.mbc-sales-point { margin-top: 18px; padding: 18px 20px; background: #fff; border-radius: 12px; box-shadow: inset 4px 0 0 #C65A1E; }
.mbc-sales-point-title { font-weight: 900; font-size: 15px; color: #C65A1E; margin-bottom: 6px; }
.mbc-sales-point p { font-size: 15px; line-height: 1.9; margin: 0 0 8px; }

/* ---- 主な装備の丸い札 ---- */
.mbc-equipment { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px; }
.mbc-chip { padding: 7px 12px; border-radius: 999px; background: #fff; border: 1px solid #EFE4DA; font-size: 13px; font-weight: 700; color: #3B302A; }

/* ---- 車の表 ---- */
.mbc-table { width: 100%; border-collapse: collapse; background: #fff; border-radius: 12px; overflow: hidden; border: 0; margin: 0; }
.mbc-table tr { border-bottom: 1px solid #F1E8E0; }
.mbc-table tr:last-child { border-bottom: 0; }
.mbc-table th { text-align: left; padding: 12px 16px; width: 32%; color: #8A7A70; font-weight: 700; background: #FDFAF7; font-size: 13px; border: 0; }
.mbc-table td { padding: 12px 16px; font-weight: 700; font-size: 15px; color: #3B302A; border: 0; }

/* ---- 動画（暗い帯） ---- */
.mbc-dark { margin-top: 40px; background: #1C1410; color: #fff; }
.mbc-dark-in { max-width: 900px; margin: 0 auto; padding: 56px 24px; }
.mbc-en-big { margin: 0; font-family: "Montserrat", sans-serif; font-weight: 900; font-size: 44px; line-height: 1; color: #C65A1E; }
.mbc-h2-light { color: #fff; font-size: 24px; }
.mbc-videos { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.mbc-video { margin: 0; }
.mbc-video-frame { position: relative; aspect-ratio: 16 / 9; border-radius: 12px; overflow: hidden; background: #000; }
.mbc-video-frame iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.mbc-video figcaption { margin-top: 8px; display: inline-block; background: #fff; color: #1C1410; font-weight: 900; font-size: 12px; padding: 4px 8px; border-radius: 4px; }

/* ---- 締め ---- */
.mbc-closing { max-width: 900px; margin: 0 auto; padding: 48px 24px 0; }
.mbc-closing-card { background: #FBE8DA; border-radius: 16px; padding: 36px; }
.mbc-listings-lead { margin: 18px 0 6px; font-size: 13px; color: #5A4C43; }
.mbc-listings { display: flex; flex-wrap: wrap; gap: 16px; }
.mbc-listing { font-weight: 700; font-size: 14px; color: #C65A1E !important; text-decoration: underline; }

/* ---- ほかの入荷情報 ---- */
.mbc-others { max-width: 1200px; margin: 0 auto; padding: 56px 40px 64px; }
.mbc-others-list { margin-top: 18px; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; }
.mbc-other { display: flex; flex-direction: column; background: #fff; border-radius: 14px; overflow: hidden; text-decoration: none; color: #3B302A !important; box-shadow: 0 6px 20px rgba(59, 48, 42, .06); transition: transform .25s, box-shadow .25s; }
.mbc-other:hover { transform: translateY(-6px); box-shadow: 0 22px 40px rgba(59, 48, 42, .16); }
.mbc-other-img { width: 100%; aspect-ratio: 16 / 10; object-fit: cover; display: block; }
.mbc-other-noimg { background: #E9DFD5; }
.mbc-other-text { padding: 20px 22px 24px; display: flex; flex-direction: column; gap: 6px; }
.mbc-other-date { font-size: 13px; color: #8A7A70; }
.mbc-other-title { font-weight: 900; font-size: 16px; line-height: 1.6; }
.mbc-all { display: table; margin: 18px auto 0; padding: 15px 28px; border-radius: 10px; border: 1px solid #D9C9BC; background: #fff; color: #3B302A !important; font-weight: 700; font-size: 15px; text-decoration: none; }
.mbc-all:hover { border-color: #C65A1E; }

/* ---- フッター ---- */
.mbc-footer { background: #1C1410; color: rgba(255, 255, 255, .75); padding: 32px 24px; text-align: center; }
.mbc-footer-name { font-weight: 900; font-size: 15px; color: #fff; }
.mbc-footer-nav { margin-top: 12px; display: flex; justify-content: center; flex-wrap: wrap; gap: 16px; font-size: 13px; }
.mbc-footer-nav a { color: rgba(255, 255, 255, .85) !important; text-decoration: none; }
.mbc-footer-copy { margin-top: 12px; font-size: 12px; color: rgba(255, 255, 255, .6); }
.mbc-bar { display: none; }

/* ---- スマホ ---- */
@media (max-width: 767px) {
	.admin-bar .mbc-header { top: 46px; }
	.mbc-header-in { padding: 0 16px; min-height: 56px; gap: 10px; }
	.mbc-logo { width: 100px; }
	.mbc-brand { gap: 10px; }
	.mbc-brand-name { font-size: 14px; letter-spacing: .02em; padding-left: 10px; }
	.mbc-menu { display: none; }
	.mbc-chips-nav { display: flex; gap: 6px; padding: 10px 16px; overflow-x: auto; border-top: 1px solid #EFE4DA; }
	.mbc-chips-nav a { flex: none; display: flex; align-items: center; height: 36px; padding: 0 14px; border-radius: 999px; background: #FAF6F1; color: #3B302A !important; font-weight: 700; font-size: 13px; text-decoration: none; }
	.mbc-chips-nav a.is-current { background: #C65A1E; color: #fff !important; font-weight: 900; }

	.mbc-main { padding: 0 16px 8px; }
	.mbc-slider-btn { width: 48px; height: 48px; }
	.mbc-slider-btn svg { width: 24px; height: 24px; }
	.mbc-slider-prev { left: 8px; }
	.mbc-slider-next { right: 8px; }
	.mbc-slider-hint { display: block; }
	.mbc-photos { margin: 0 -16px; border-radius: 0; }
	.mbc-head { margin-top: 20px; }
	.mbc-title { font-size: 26px; }

	.mbc-boxes { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; margin-top: 18px; }
	.mbc-box { padding: 12px 14px; }
	.mbc-box-value { font-size: 18px; }
	.mbc-contact { grid-template-columns: 1fr 1fr; gap: 8px; }
	.mbc-btn-apply { grid-column: 1 / -1; min-height: 60px; }
	.mbc-btn-line, .mbc-btn-tel { min-height: 52px; font-size: 13px; }

	.mbc-section { margin-top: 40px; }
	.mbc-h2 { font-size: 22px; }
	.mbc-h3 { font-size: 17px; }

	.mbc-dark-in { padding: 44px 16px; }
	.mbc-en-big { font-size: 36px; }
	.mbc-h2-light { font-size: 20px; }
	.mbc-videos { grid-template-columns: 1fr; gap: 14px; }

	.mbc-closing { padding: 40px 16px 0; }
	.mbc-closing-card { padding: 28px 20px; }

	.mbc-others { padding: 44px 16px 48px; }
	.mbc-others-list { grid-template-columns: 1fr; gap: 12px; }
	.mbc-other { flex-direction: row; align-items: center; }
	.mbc-other-img { width: 120px; flex: 0 0 120px; aspect-ratio: 4 / 3; }
	.mbc-other-text { padding: 10px 14px; gap: 2px; }
	.mbc-other-date { font-size: 12px; }
	.mbc-other-title { font-size: 14px; line-height: 1.5; }
	.mbc-all { display: block; text-align: center; }

	/* 下の固定バー（審査・電話・LINE） */
	.mbc-footer { padding-bottom: 96px; }
	.mbc-bar { display: grid; grid-template-columns: 2fr 1fr 1fr; gap: 8px; position: fixed; left: 0; right: 0; bottom: 0; z-index: 30; background: #fff; border-top: 1px solid #EFE4DA; padding: 8px 10px; box-shadow: 0 -6px 20px rgba(59, 48, 42, .08); }
	.mbc-bar a { display: flex; align-items: center; justify-content: center; height: 52px; border-radius: 8px; font-weight: 900; font-size: 14px; text-decoration: none; }
	.mbc-bar-apply { background: #C65A1E; color: #fff !important; font-size: 15px !important; }
	.mbc-bar-tel { background: #3B302A; color: #fff !important; }
	.mbc-bar-line { background: #06C755; color: #fff !important; }
}

/* ---- ブログの一覧のページ（0.11.0。templates/archive-blog.php）---- */
.mbl-hero { max-width: 1100px; margin: 0 auto; padding: 44px 24px 8px; }
.mbl-lead { margin: 10px 0 0; font-size: 15px; line-height: 1.8; color: #6B5D55; }
.mbl-stores { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 18px; }
body.mbc-page .mbl-store { display: inline-flex; align-items: center; height: 36px; padding: 0 14px; border-radius: 8px; background: #F4EEE9; color: #3B302A; font-weight: 700; font-size: 13px; text-decoration: none; }
body.mbc-page .mbl-store.is-current { background: #C65A1E; color: #fff; }
.mbl-grid { max-width: 1100px; margin: 0 auto; padding: 24px 24px 40px; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 22px; }
body.mbc-page .mbl-card { display: flex; flex-direction: column; background: #fff; border-radius: 14px; overflow: hidden; text-decoration: none; color: #3B302A; box-shadow: 0 2px 10px rgba(59, 48, 42, .06); transition: box-shadow .2s; }
body.mbc-page .mbl-card:hover { box-shadow: 0 6px 20px rgba(59, 48, 42, .14); }
.mbl-img { display: block; width: 100%; aspect-ratio: 4 / 3; object-fit: cover; background: #E7DDD3; }
.mbl-body { display: flex; flex-direction: column; gap: 10px; padding: 16px 18px 20px; }
.mbl-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.mbl-title { font-weight: 900; font-size: 15px; line-height: 1.55; color: #3B302A; }
.mbl-empty { max-width: 1100px; margin: 0 auto; padding: 24px; color: #6B5D55; }
.mbl-pager { display: flex; justify-content: center; flex-wrap: wrap; gap: 8px; padding: 0 24px 56px; }
body.mbc-page .mbl-pager .page-numbers { display: inline-flex; align-items: center; justify-content: center; min-width: 44px; height: 44px; padding: 0 12px; border-radius: 10px; background: #fff; border: 1px solid #E7D9CC; font-weight: 900; color: #3B302A; text-decoration: none; box-sizing: border-box; }
body.mbc-page .mbl-pager .page-numbers.current { background: #3B302A; border-color: #3B302A; color: #fff; }
body.mbc-page .mbl-pager .page-numbers.dots { border: 0; background: transparent; }
@media (max-width: 767px) {
	.mbl-hero { padding: 28px 16px 4px; }
	.mbl-lead { font-size: 14px; }
	.mbl-grid { grid-template-columns: 1fr; gap: 16px; padding: 16px 16px 32px; }
	.mbl-pager { padding: 0 16px 40px; }
}
@media (min-width: 768px) and (max-width: 1024px) {
	.mbl-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}