/* =========================================================================
   region-mv.css
   エリア別メインビジュアル（single-region.php）専用スタイル。
   既存サイトCSSとの衝突を避けるため、すべて .region-mv-wrap 配下にスコープ。
   region ページ（is_singular('region')）のときだけ header.php で読み込む。
   ========================================================================= */

/* 全体ズーム方式：
   .region-mv-wrap を 10:3 のステージ（横幅フル）にし、その中の設計サイズ
   1000x300px のバナーを JS で transform:scale して「デザイン全体」を拡大縮小する。
   これにより文字・バッジ・余白まで含めて横幅に比例してズームする。 */
.region-mv-wrap { position: relative; width: 100%; aspect-ratio: 1000 / 300; overflow: hidden; margin: 0; }
.region-mv-wrap .banner-grid { width: 100%; margin: 0; box-sizing: border-box; }

/* Base：設計サイズ 1000x300 を固定し、JS で scale() してフル幅まで拡大（ドロップシャドウなし） */
.region-mv-wrap .banner-container {
    position: absolute; top: 0; left: 0; width: 1000px; height: 300px; margin: 0;
    transform-origin: top left;
    background-size: cover; background-position: center; background-repeat: no-repeat;
    overflow: hidden;
    display: flex; box-sizing: border-box;
}

/* スマホ専用の画像エリア（card/ticket/frame 用）。PCでは非表示。 */
.region-mv-wrap .m-photo { display: none; }

/* Overlays */
.region-mv-wrap .overlay { position: absolute; inset: 0; z-index: 1; }
.region-mv-wrap .ov-grad-left .overlay { background: linear-gradient(90deg, rgba(0,0,0,0.9) 0%, rgba(0,0,0,0.5) 50%, transparent); }
.region-mv-wrap .ov-grad-right .overlay { background: linear-gradient(270deg, rgba(0,0,0,0.9) 0%, rgba(0,0,0,0.5) 50%, transparent); }
.region-mv-wrap .ov-grad-bottom .overlay { background: linear-gradient(0deg, rgba(0,0,0,0.9) 0%, rgba(0,0,0,0.4) 60%, transparent); }
.region-mv-wrap .ov-solid .overlay { background: rgba(0,0,0,0.5); }
.region-mv-wrap .ov-diag-left .overlay { background: linear-gradient(105deg, rgba(0,0,0,0.9) 0%, rgba(0,0,0,0.7) 45%, transparent 45.1%); }
.region-mv-wrap .ov-diag-right .overlay { background: linear-gradient(-105deg, rgba(0,0,0,0.9) 0%, rgba(0,0,0,0.7) 45%, transparent 45.1%); }

/* Content wrapper */
.region-mv-wrap .content {
    position: relative; z-index: 2; width: 100%; height: 100%;
    padding: 30px 40px; box-sizing: border-box; display: flex;
}

/* Alignments */
.region-mv-wrap .al-left .content { flex-direction: column; justify-content: center; align-items: flex-start; text-align: left; }
.region-mv-wrap .al-right .content { flex-direction: column; justify-content: center; align-items: flex-end; text-align: right; }
.region-mv-wrap .al-center .content { flex-direction: column; justify-content: center; align-items: center; text-align: center; }

/* Vertical anchor */
.region-mv-wrap .va-top .content  { justify-content: flex-start; padding-top: 26px; }
.region-mv-wrap .va-mid .content  { justify-content: center; }
.region-mv-wrap .va-bot .content  { justify-content: flex-end; padding-bottom: 26px; }
.region-mv-wrap .va-bot .features { margin-bottom: 14px; }

/* Text Group */
.region-mv-wrap .text-group { display: flex; flex-direction: column; gap: 8px; z-index: 10; }
.region-mv-wrap .al-left .text-group { align-items: flex-start; }
.region-mv-wrap .al-right .text-group { align-items: flex-end; }
.region-mv-wrap .al-center .text-group { align-items: center; }

/* Header */
.region-mv-wrap .header { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.region-mv-wrap .al-right .header { flex-direction: row-reverse; }
.region-mv-wrap .al-center .header { justify-content: center; }

.region-mv-wrap .header-right { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.region-mv-wrap .al-center .header-right { justify-content: center; }

.region-mv-wrap .area-text { font-size: 16px; font-weight: 900; background: var(--primary); color: #fff; padding: 4px 12px; border-radius: 4px; box-shadow: 0 2px 4px rgba(0,0,0,0.3); }
.region-mv-wrap .sub-copy { font-size: 16px; font-weight: 700; color: #fff; text-shadow: 0 2px 4px rgba(0,0,0,0.8); }

/* Main Copy */
.region-mv-wrap .main-copy { font-size: 42px; font-weight: 900; margin: 0; line-height: 1.2; color: #fff; text-shadow: 0 3px 8px rgba(0,0,0,0.8); letter-spacing: 1px; }
.region-mv-wrap .main-copy span { color: var(--accent); }

/* Features */
.region-mv-wrap .features { display: flex; gap: 10px; margin-top: 0; margin-bottom: 25px; }
.region-mv-wrap .feature-badge { background: #fff; color: #111; padding: 4px 14px; border-radius: 20px; font-size: 14px; font-weight: 900; border: 2px solid var(--primary); box-shadow: 0 3px 6px rgba(0,0,0,0.3); display: flex; align-items: center; }
.region-mv-wrap .feature-badge::before { content: "\2714"; color: var(--primary); font-size: 12px; }

/* Metrics Group */
.region-mv-wrap .metrics-group { display: flex; gap: 15px; margin-top: 0; z-index: 10; }
.region-mv-wrap .al-center .metrics-group { justify-content: center; }
.region-mv-wrap .al-right .metrics-group { justify-content: flex-end; }
.region-mv-wrap .m-value { display: flex; align-items: baseline; gap: 4px; }

/* Metrics Styles */
.region-mv-wrap .met-band .content { padding-bottom: 80px; justify-content: space-between; }
.region-mv-wrap .met-band .metrics-group { position: absolute; bottom: 0; left: 0; width: 100%; background: rgba(255,255,255,0.95); padding: 12px 20px; margin: 0; box-sizing: border-box; justify-content: space-around; color: #000; box-shadow: 0 -4px 10px rgba(0,0,0,0.1); }
.region-mv-wrap .met-band .metric { display: flex; flex-direction: column; align-items: center; }
.region-mv-wrap .met-band .m-label { font-size: 13px; font-weight: 900; color: #555; }
.region-mv-wrap .met-band .m-value strong { font-size: 28px; color: var(--primary); line-height: 1; margin-top: 4px; }
.region-mv-wrap .met-band .m-value span { font-size: 13px; font-weight: bold; }

.region-mv-wrap .met-boxes .metric { background: #fff; color: #000; padding: 10px 20px; box-shadow: 0 4px 15px rgba(0,0,0,0.3); display: flex; flex-direction: column; align-items: center; min-width: 120px; }
.region-mv-wrap .met-boxes .m-label { font-size: 12px; font-weight: 900; color: #555; }
.region-mv-wrap .met-boxes .m-value strong { font-size: 26px; color: var(--primary); line-height: 1; margin-top: 4px; }
.region-mv-wrap .met-boxes .m-value span { font-size: 12px; font-weight: bold; }

.region-mv-wrap .met-glass .metric { background: rgba(0,0,0,0.5); backdrop-filter: blur(8px); border: 1px solid rgba(255,255,255,0.2); padding: 10px 20px; border-radius: 8px; display: flex; flex-direction: column; align-items: center; color: #fff; box-shadow: 0 4px 15px rgba(0,0,0,0.3); min-width: 120px; }
.region-mv-wrap .met-glass .m-label { font-size: 12px; font-weight: 900; color: #ddd; }
.region-mv-wrap .met-glass .m-value strong { font-size: 26px; color: var(--accent); line-height: 1; margin-top: 4px; }
.region-mv-wrap .met-glass .m-value span { font-size: 12px; font-weight: bold; }

.region-mv-wrap .met-minimal .metric { display: flex; flex-direction: column; align-items: center; color: #fff; text-shadow: 0 2px 5px rgba(0,0,0,0.8); min-width: 120px; }
.region-mv-wrap .met-minimal .m-label { font-size: 13px; font-weight: 900; border-bottom: 2px solid var(--accent); padding-bottom: 4px; margin-bottom: 6px; }
.region-mv-wrap .met-minimal .m-value strong { font-size: 28px; color: var(--accent); line-height: 1; }
.region-mv-wrap .met-minimal .m-value span { font-size: 13px; font-weight: bold; }

.region-mv-wrap .met-side .metrics-group { position: absolute; right: 30px; top: 65%; transform: translateY(-50%); flex-direction: column; gap: 15px; margin: 0; }
.region-mv-wrap .al-right.met-side .metrics-group { right: auto; left: 30px; }
.region-mv-wrap .al-center.met-side .metrics-group { position: relative; right: auto; top: auto; transform: none; flex-direction: row; margin-top: 15px; }
.region-mv-wrap .met-side .metric { background: var(--primary); color: #fff; padding: 8px 20px; border-radius: 30px; display: flex; align-items: center; gap: 12px; border: 2px solid rgba(255,255,255,0.5); box-shadow: 0 4px 10px rgba(0,0,0,0.3); }
.region-mv-wrap .met-side .m-label { font-size: 13px; font-weight: 900; }
.region-mv-wrap .met-side .m-value strong { font-size: 22px; color: var(--accent); line-height: 1; }
.region-mv-wrap .met-side .m-value span { font-size: 12px; font-weight: bold; }

/* Badge Styles */
.region-mv-wrap .badge-cheapest { z-index: 20; font-weight: 900; text-align: center; line-height: 1.2; }

.region-mv-wrap .bdg-circle { position: absolute; top: 20px; right: 30px; width: 85px; height: 85px; background: var(--primary); color: #fff; border-radius: 50%; display: flex; align-items: center; justify-content: center; transform: rotate(15deg); border: 2px solid #fff; box-shadow: 0 4px 15px rgba(0,0,0,0.4); font-size: 16px; }
.region-mv-wrap .al-right .bdg-circle { right: auto; left: 30px; transform: rotate(-15deg); }

.region-mv-wrap .bdg-ribbon { position: absolute; top: 20px; left: 0; background: var(--primary); color: #fff; padding: 8px 40px 8px 20px; font-size: 16px; font-weight: 900; clip-path: polygon(0 0, 100% 0, 85% 50%, 100% 100%, 0 100%); border-left: 6px solid var(--accent); letter-spacing: 1px; }
.region-mv-wrap .al-left .bdg-ribbon { left: auto; right: 0; padding: 8px 20px 8px 40px; clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%, 15% 50%); border-left: none; border-right: 6px solid var(--accent); }

.region-mv-wrap .bdg-pill { display: inline-block; background: var(--accent); color: #000; padding: 4px 12px; border-radius: 4px; font-size: 20px; margin-left: 10px; vertical-align: middle; box-shadow: 0 2px 5px rgba(0,0,0,0.3); transform: skewX(-10deg); }
.region-mv-wrap .bdg-pill span { display: inline-block; transform: skewX(10deg); }

.region-mv-wrap .bdg-stamp { position: absolute; bottom: 45px; right: 30px; border: 3px dashed var(--accent); color: var(--accent); padding: 10px 15px; transform: rotate(-10deg); font-size: 16px; background: rgba(0,0,0,0.6); backdrop-filter: blur(4px); border-radius: 8px; box-shadow: 0 4px 10px rgba(0,0,0,0.3); }
.region-mv-wrap .al-right .bdg-stamp { right: auto; left: 30px; transform: rotate(-15deg); }
.region-mv-wrap .met-band .bdg-stamp { bottom: 80px; }
.region-mv-wrap .met-side .bdg-stamp { top: 25px; bottom: auto; }

.region-mv-wrap .bdg-stamp-right { position: absolute; bottom: 45px; right: 20px; border: 3px dashed var(--accent); color: var(--accent); padding: 10px 15px; transform: rotate(5deg); font-size: 16px; background: rgba(0,0,0,0.6); backdrop-filter: blur(4px); border-radius: 8px; box-shadow: 0 4px 10px rgba(0,0,0,0.3); }
.region-mv-wrap .al-right .bdg-stamp-right { right: auto; left: 30px; transform: rotate(-15deg); }
.region-mv-wrap .met-band .bdg-stamp-right { bottom: 80px; }
.region-mv-wrap .met-side .bdg-stamp-right { top: 25px; bottom: auto; }

/* =========================================================================
   Layout: Panel-L / Panel-R
   ========================================================================= */
.region-mv-wrap .banner-container.lyt-panel-l,
.region-mv-wrap .banner-container.lyt-panel-r {
    display: grid;
    background: var(--primary);
    background-image: none;
    color: #fff;
}
.region-mv-wrap .banner-container.lyt-panel-l { grid-template-columns: 40% 62%; }
.region-mv-wrap .banner-container.lyt-panel-r { grid-template-columns: 60% 38%; }

.region-mv-wrap .lyt-panel-l .panel,
.region-mv-wrap .lyt-panel-r .panel {
    padding: 18px 22px; color: #fff; position: relative;
    display: flex; flex-direction: column; justify-content: center; gap: 8px;
}
.region-mv-wrap .lyt-panel-r .panel { align-items: flex-end; text-align: right; }

.region-mv-wrap .lyt-panel-l .panel::after {
    content: ''; position: absolute; right: -22px; top: 0; bottom: 0; width: 22px;
    background: var(--primary); clip-path: polygon(0 0, 100% 50%, 0 100%); z-index: 2;
}
.region-mv-wrap .lyt-panel-r .panel::before {
    content: ''; position: absolute; left: -21px; top: 0; bottom: 0; width: 22px;
    background: var(--primary); clip-path: polygon(100% 0, 0 50%, 100% 100%); z-index: 2;
}

.region-mv-wrap .lyt-panel-l .img-area,
.region-mv-wrap .lyt-panel-r .img-area {
    background-size: cover; background-position: center; position: relative;
}

.region-mv-wrap .lyt-panel-l .area-text,
.region-mv-wrap .lyt-panel-r .area-text {
    background: var(--accent); color: #000; padding: 3px 10px; border-radius: 3px;
    font-size: 14px; font-weight: 900; box-shadow: none;
    display: inline-block;
}
.region-mv-wrap .lyt-panel-l .area-text { align-self: flex-start; }
.region-mv-wrap .lyt-panel-r .area-text { align-self: flex-end; }

.region-mv-wrap .lyt-panel-l .sub-copy,
.region-mv-wrap .lyt-panel-r .sub-copy {
    font-size: 15px; font-weight: 700; opacity: 0.95; text-shadow: none;
}

.region-mv-wrap .lyt-panel-l .main-copy,
.region-mv-wrap .lyt-panel-r .main-copy {
    font-size: 35px; font-weight: 900; line-height: 1.2; margin: 0;
    text-shadow: none; letter-spacing: 0;
}
.region-mv-wrap .lyt-panel-l .main-copy span,
.region-mv-wrap .lyt-panel-r .main-copy span { color: var(--accent); }

.region-mv-wrap .lyt-panel-l .features,
.region-mv-wrap .lyt-panel-r .features {
    display: flex; gap: 5px; flex-wrap: wrap; margin: 4px 0 0;
}
.region-mv-wrap .lyt-panel-r .features { justify-content: flex-end; }

.region-mv-wrap .lyt-panel-l .feature-badge,
.region-mv-wrap .lyt-panel-r .feature-badge {
    background: rgba(255,255,255,0.18); border: 1px solid rgba(255,255,255,0.4);
    color: #fff; padding: 2px 15px; border-radius: 16px; font-size: 16px;
    font-weight: 700; box-shadow: none;
}
.region-mv-wrap .lyt-panel-l .feature-badge::before,
.region-mv-wrap .lyt-panel-r .feature-badge::before { content: ''; }

.region-mv-wrap .lyt-panel-l .metrics-group,
.region-mv-wrap .lyt-panel-r .metrics-group {
    display: flex; gap: 3px; margin-top: 6px; position: static; transform: none;
    background: transparent; padding: 0; box-shadow: none;
    align-self: stretch; flex-direction: row;
}

.region-mv-wrap .lyt-panel-l .metric,
.region-mv-wrap .lyt-panel-r .metric {
    background: rgba(0,0,0,0.3); padding: 5px 8px; border-radius: 5px;
    flex: 1; display: flex; flex-direction: column; align-items: center;
    min-width: 0; color: #fff; border: none; box-shadow: none;
    backdrop-filter: none;
}
.region-mv-wrap .lyt-panel-l .m-label,
.region-mv-wrap .lyt-panel-r .m-label {
    font-size: 12px; opacity: 0.85; white-space: nowrap;
    color: #fff; font-weight: 900; border-bottom: none; padding: 0; margin: 0;
}
.region-mv-wrap .lyt-panel-l .m-value,
.region-mv-wrap .lyt-panel-r .m-value { display: flex; align-items: baseline; gap: 3px; margin-top: 2px; }
.region-mv-wrap .lyt-panel-l .m-value strong,
.region-mv-wrap .lyt-panel-r .m-value strong {
    font-size: 16px; color: var(--accent); line-height: 1;
}
.region-mv-wrap .lyt-panel-l .m-value span,
.region-mv-wrap .lyt-panel-r .m-value span { font-size: 9px; opacity: 0.85; font-weight: bold; }

.region-mv-wrap .lyt-panel-l .badge-cheapest,
.region-mv-wrap .lyt-panel-r .badge-cheapest {
    position: absolute; top: 12px; z-index: 3;
    background: var(--accent); color: #000;
    padding: 4px 14px; border-radius: 18px;
    font-size: 16px; font-weight: 900; line-height: 1;
    box-shadow: 0 3px 8px rgba(0,0,0,0.5);
    text-align: center; transform: none; clip-path: none; border: none;
    width: auto; height: auto;
}
.region-mv-wrap .lyt-panel-l .badge-cheapest { right: 35px; left: auto; }
.region-mv-wrap .lyt-panel-r .badge-cheapest { left: 12px; right: auto; }

/* =========================================================================
   Layout: Strip-Top
   ========================================================================= */
.region-mv-wrap .banner-container.lyt-strip-top { display: block; }
.region-mv-wrap .lyt-strip-top .overlay { background: linear-gradient(0deg, rgba(0,0,0,0.85) 0%, rgba(0,0,0,0.25) 65%, rgba(0,0,0,0.35) 100%); }
.region-mv-wrap .lyt-strip-top .top-band {
    position: absolute; top: 0; left: 0; right: 0; z-index: 6;
    background: var(--primary); color: #fff;
    display: flex; align-items: center; gap: 14px;
    padding: 11px 26px; box-sizing: border-box;
    border-bottom: 3px solid var(--accent);
}
.region-mv-wrap .lyt-strip-top .top-band .area-text { background: var(--accent); color: #000; box-shadow: none; }
.region-mv-wrap .lyt-strip-top .top-band .sub-copy { text-shadow: none; font-size: 15px; }
.region-mv-wrap .lyt-strip-top .strip-body {
    position: absolute; left: 0; right: 0; bottom: 0; z-index: 5;
    padding: 0 30px 22px; box-sizing: border-box; color: #fff;
}
.region-mv-wrap .lyt-strip-top .strip-body .main-copy { font-size: 34px; margin: 0; }
.region-mv-wrap .lyt-strip-top .features { margin: 10px 0 14px; }
.region-mv-wrap .lyt-strip-top .metrics-group { display: flex; gap: 12px; }
.region-mv-wrap .lyt-strip-top .metric { background: rgba(0,0,0,0.5); backdrop-filter: blur(4px); border: 1px solid rgba(255,255,255,0.25); border-radius: 6px; padding: 6px 14px; display: flex; flex-direction: column; align-items: center; }
.region-mv-wrap .lyt-strip-top .m-label { font-size: 11px; color: #ddd; font-weight: 900; white-space: nowrap; }
.region-mv-wrap .lyt-strip-top .m-value strong { font-size: 21px; color: var(--accent); line-height: 1; }
.region-mv-wrap .lyt-strip-top .m-value span { font-size: 10px; font-weight: bold; }
.region-mv-wrap .lyt-strip-top.al-center .top-band { justify-content: center; }
.region-mv-wrap .lyt-strip-top.al-center .strip-body { text-align: center; }
.region-mv-wrap .lyt-strip-top.al-center .features,
.region-mv-wrap .lyt-strip-top.al-center .metrics-group { justify-content: center; }
.region-mv-wrap .lyt-strip-top.al-right .top-band { flex-direction: row-reverse; }
.region-mv-wrap .lyt-strip-top.al-right .strip-body { text-align: right; }
.region-mv-wrap .lyt-strip-top.al-right .features,
.region-mv-wrap .lyt-strip-top.al-right .metrics-group { justify-content: flex-end; }

/* =========================================================================
   Layout: Sheet-Bot
   ========================================================================= */
.region-mv-wrap .banner-container.lyt-sheet-bot { display: block; }
.region-mv-wrap .lyt-sheet-bot .overlay { background: rgba(0,0,0,0.2); }
.region-mv-wrap .lyt-sheet-bot .sheet {
    position: absolute; left: 0; right: 0; bottom: 0; z-index: 5;
    background: var(--primary); /* color-mix 非対応ブラウザ向けフォールバック */
    background: color-mix(in srgb, var(--primary) 82%, transparent); /* 少し透過させ背景画像を見せる */
    backdrop-filter: blur(2px); color: #fff;
    padding: 14px 28px 16px; box-sizing: border-box;
    display: flex; align-items: center; justify-content: space-between; gap: 20px;
    border-top: 4px solid var(--accent);
}
.region-mv-wrap .lyt-sheet-bot .sheet-main { display: flex; flex-direction: column; gap: 6px; }
.region-mv-wrap .lyt-sheet-bot .sheet .area-text { background: var(--accent); color: #000; align-self: flex-start; box-shadow: none; }
.region-mv-wrap .lyt-sheet-bot .sheet .main-copy { font-size: 27px; text-shadow: none; margin: 0; line-height: 1.15; }
.region-mv-wrap .lyt-sheet-bot .sheet .features { margin: 2px 0 0; gap: 6px; }
.region-mv-wrap .lyt-sheet-bot .sheet .feature-badge { background: rgba(255,255,255,0.18); border: 1px solid rgba(255,255,255,0.45); color: #fff; box-shadow: none; padding: 2px 12px; }
.region-mv-wrap .lyt-sheet-bot .sheet .feature-badge::before { content: ''; }
.region-mv-wrap .lyt-sheet-bot .metrics-group { display: flex; gap: 10px; flex-shrink: 0; }
.region-mv-wrap .lyt-sheet-bot .metric { background: rgba(255,255,255,0.15); border-radius: 6px; padding: 6px 12px; display: flex; flex-direction: column; align-items: center; }
.region-mv-wrap .lyt-sheet-bot .m-label { font-size: 11px; color: #eee; font-weight: 900; white-space: nowrap; }
.region-mv-wrap .lyt-sheet-bot .m-value strong { font-size: 20px; color: var(--accent); line-height: 1; }
.region-mv-wrap .lyt-sheet-bot .m-value span { font-size: 10px; font-weight: bold; }
.region-mv-wrap .lyt-sheet-bot .area-text-top { position: absolute; top: 16px; left: 24px; z-index: 6; background: var(--primary); color: #fff; padding: 4px 12px; border-radius: 4px; font-weight: 900; font-size: 15px; }
.region-mv-wrap .lyt-sheet-bot.al-center .sheet { justify-content: center; text-align: center; }
.region-mv-wrap .lyt-sheet-bot.al-center .sheet-main { align-items: center; }
.region-mv-wrap .lyt-sheet-bot.al-center .sheet .area-text { align-self: center; }
.region-mv-wrap .lyt-sheet-bot.al-center .sheet .features { justify-content: center; }
.region-mv-wrap .lyt-sheet-bot.al-right .sheet { flex-direction: row-reverse; }
.region-mv-wrap .lyt-sheet-bot.al-right .sheet-main { align-items: flex-end; }
.region-mv-wrap .lyt-sheet-bot.al-right .sheet .area-text { align-self: flex-end; }
.region-mv-wrap .lyt-sheet-bot.al-right .sheet .features { justify-content: flex-end; }

/* =========================================================================
   Layout: Card / Ticket / Frame
   ========================================================================= */

/* --- Card --- */
.region-mv-wrap .banner-container.lyt-card { display: flex; align-items: flex-end; justify-content: flex-start; }
.region-mv-wrap .lyt-card .overlay { background: linear-gradient(115deg, rgba(0,0,0,0.5) 0%, rgba(0,0,0,0.15) 45%, transparent 65%); }
.region-mv-wrap .lyt-card .card {
    position: relative; z-index: 5; margin: 0 0 24px 26px;
    background: rgba(16,17,22,0.82); backdrop-filter: blur(6px);
    border-left: 5px solid var(--accent); border-radius: 12px;
    padding: 15px 24px 17px; max-width: 530px; color: #fff;
    box-shadow: 0 12px 30px rgba(0,0,0,0.5);
}
.region-mv-wrap .lyt-card .header { gap: 10px; margin-bottom: 6px; }
.region-mv-wrap .lyt-card .area-text { font-size: 15px; }
.region-mv-wrap .lyt-card .sub-copy { font-size: 14px; text-shadow: none; }
.region-mv-wrap .lyt-card .main-copy { font-size: 30px; text-shadow: none; margin: 0 0 9px; }
.region-mv-wrap .lyt-card .features { margin: 0 0 11px; gap: 8px; }
.region-mv-wrap .lyt-card .feature-badge { background: rgba(255,255,255,0.14); border: 1px solid rgba(255,255,255,0.4); color: #fff; box-shadow: none; padding: 2px 12px; }
.region-mv-wrap .lyt-card .feature-badge::before { content: '\2714'; color: var(--accent); }
.region-mv-wrap .lyt-card .metrics-group { gap: 20px; }
.region-mv-wrap .lyt-card .metric { display: flex; flex-direction: column; }
.region-mv-wrap .lyt-card .m-label { font-size: 11px; color: #ccc; font-weight: 900; }
.region-mv-wrap .lyt-card .m-value strong { font-size: 19px; color: var(--accent); line-height: 1; }
.region-mv-wrap .lyt-card .m-value span { font-size: 10px; font-weight: bold; }

/* --- Ticket --- */
.region-mv-wrap .banner-container.lyt-ticket { display: flex; align-items: center; justify-content: center; }
.region-mv-wrap .lyt-ticket .overlay { background: rgba(0,0,0,0.3); }
.region-mv-wrap .lyt-ticket .ticket {
    position: relative; z-index: 5; max-width: 640px; text-align: center;
    background: rgba(255,255,255,0.95); color: #1a1a1a;
    border-radius: 14px; padding: 16px 36px 18px;
    border-top: 5px solid var(--primary); border-bottom: 5px solid var(--accent);
    box-shadow: 0 14px 36px rgba(0,0,0,0.45);
}
.region-mv-wrap .lyt-ticket .header { justify-content: center; gap: 10px; }
.region-mv-wrap .lyt-ticket .sub-copy { color: #555; text-shadow: none; font-size: 15px; }
.region-mv-wrap .lyt-ticket .main-copy { color: #111; text-shadow: none; font-size: 31px; margin: 9px 0; }
.region-mv-wrap .lyt-ticket .main-copy span { color: var(--primary); }
.region-mv-wrap .lyt-ticket .features { justify-content: center; margin: 9px 0 11px; gap: 9px; }
.region-mv-wrap .lyt-ticket .feature-badge { background: #f4f4f4; color: #111; border-color: var(--primary); box-shadow: none; }
.region-mv-wrap .lyt-ticket .metrics-group { justify-content: center; gap: 26px; }
.region-mv-wrap .lyt-ticket .metric { display: flex; flex-direction: column; align-items: center; }
.region-mv-wrap .lyt-ticket .m-label { font-size: 11px; color: #777; font-weight: 900; }
.region-mv-wrap .lyt-ticket .m-value strong { font-size: 22px; color: var(--primary); line-height: 1; }
.region-mv-wrap .lyt-ticket .m-value span { font-size: 11px; font-weight: bold; }

/* --- Frame --- */
.region-mv-wrap .banner-container.lyt-frame { display: block; }
.region-mv-wrap .lyt-frame .overlay {
    border: 11px solid var(--primary);
    box-shadow: inset 0 0 0 3px rgba(255,255,255,0.85);
    background: linear-gradient(0deg, rgba(0,0,0,0.62) 0%, rgba(0,0,0,0.1) 42%, transparent 60%);
}
.region-mv-wrap .lyt-frame .frame-tag {
    position: absolute; top: 11px; left: 40px; z-index: 6;
    background: var(--accent); color: #111; font-weight: 900;
    padding: 7px 20px; border-radius: 0 0 8px 8px; font-size: 16px;
    box-shadow: 0 4px 10px rgba(0,0,0,0.35); letter-spacing: 1px;
}
.region-mv-wrap .lyt-frame .frame-body {
    position: absolute; left: 38px; right: 38px; bottom: 28px; z-index: 5; color: #fff;
}
.region-mv-wrap .lyt-frame .sub-copy { font-size: 14px; }
.region-mv-wrap .lyt-frame .main-copy { font-size: 32px; margin: 5px 0 13px; }
.region-mv-wrap .lyt-frame .features { margin: 0 0 13px; gap: 8px; }
.region-mv-wrap .lyt-frame .metrics-group { gap: 12px; }
.region-mv-wrap .lyt-frame .metric { background: rgba(0,0,0,0.55); backdrop-filter: blur(4px); border: 1px solid rgba(255,255,255,0.3); border-radius: 6px; padding: 6px 14px; display: flex; flex-direction: column; align-items: center; }
.region-mv-wrap .lyt-frame .m-label { font-size: 11px; color: #ddd; font-weight: 900; white-space: nowrap; }
.region-mv-wrap .lyt-frame .m-value strong { font-size: 20px; color: var(--accent); line-height: 1; }
.region-mv-wrap .lyt-frame .m-value span { font-size: 10px; font-weight: bold; }

/* =========================================================================
   レスポンシブ（スマホ）: 768px 未満
   バナーの高さと文字サイズを縮小し、指標は折り返し。パネル系は縦積み。
   ========================================================================= */
@media screen and (max-width: 767px) {
    /* スマホはズーム（scale）を解除し、通常フローのレスポンシブ表示に戻す */
    .region-mv-wrap { aspect-ratio: auto; height: auto; overflow: visible; }
    .region-mv-wrap .banner-container { position: static; transform: none !important; width: 100%; height: auto; min-height: 220px; }

    .region-mv-wrap .content { padding: 18px 18px; }
    .region-mv-wrap .va-top .content { padding-top: 16px; }
    .region-mv-wrap .va-bot .content { padding-bottom: 16px; }

    .region-mv-wrap .area-text { font-size: 13px; padding: 3px 9px; }
    .region-mv-wrap .sub-copy { font-size: 12px; }
    .region-mv-wrap .main-copy { font-size: 26px; letter-spacing: 0; }
    .region-mv-wrap .header,
    .region-mv-wrap .header-right { gap: 8px; }

    .region-mv-wrap .features { gap: 6px; margin-bottom: 14px; flex-wrap: wrap; }
    .region-mv-wrap .feature-badge { font-size: 12px; padding: 3px 10px; }

    .region-mv-wrap .metrics-group { gap: 8px; flex-wrap: wrap; }
    .region-mv-wrap .metric { min-width: 0 !important; padding: 6px 10px !important; }
    .region-mv-wrap .m-label { font-size: 11px !important; }
    .region-mv-wrap .m-value strong { font-size: 18px !important; }
    .region-mv-wrap .m-value span { font-size: 10px !important; }

    /* met-band: 帯が下に固定されるため本文の余白を確保 */
    .region-mv-wrap .met-band .content { padding-bottom: 74px; }
    .region-mv-wrap .met-band .metrics-group { padding: 8px 8px; }

    /* met-side: 縦並び指標を本文下に通常配置へ */
    .region-mv-wrap .met-side .metrics-group { position: static; transform: none; flex-direction: row; right: auto; left: auto; top: auto; margin-top: 12px; }
    .region-mv-wrap .al-right.met-side .metrics-group { left: auto; }
    .region-mv-wrap .met-side .metric { padding: 5px 12px !important; gap: 8px; }

    /* バッジ縮小 */
    .region-mv-wrap .bdg-circle { width: 64px; height: 64px; font-size: 12px; top: 12px; right: 14px; }
    .region-mv-wrap .al-right .bdg-circle { left: 14px; }
    .region-mv-wrap .bdg-ribbon { font-size: 12px; padding: 6px 26px 6px 14px; }
    .region-mv-wrap .al-left .bdg-ribbon { padding: 6px 14px 6px 26px; }
    .region-mv-wrap .bdg-pill { font-size: 14px; margin-left: 6px; }
    .region-mv-wrap .bdg-stamp,
    .region-mv-wrap .bdg-stamp-right { font-size: 12px; padding: 7px 10px; bottom: 16px; right: 14px; }
    .region-mv-wrap .al-right .bdg-stamp { left: 14px; }

    /* strip-top */
    .region-mv-wrap .lyt-strip-top .top-band { padding: 9px 16px; gap: 8px; }
    .region-mv-wrap .lyt-strip-top .strip-body { padding: 0 16px 16px; }
    .region-mv-wrap .lyt-strip-top .strip-body .main-copy { font-size: 24px; }
    .region-mv-wrap .lyt-strip-top .features { margin: 8px 0 10px; }

    /* sheet-bot */
    .region-mv-wrap .lyt-sheet-bot .sheet { flex-direction: column; align-items: flex-start; gap: 10px; padding: 12px 16px; }
    .region-mv-wrap .lyt-sheet-bot.al-right .sheet { flex-direction: column; }
    .region-mv-wrap .lyt-sheet-bot .sheet .main-copy { font-size: 22px; }

    /* card / ticket / frame */
    .region-mv-wrap .lyt-card .card { margin: 0 14px 16px; padding: 13px 16px 14px; max-width: none; }
    .region-mv-wrap .lyt-card .main-copy { font-size: 23px; }
    .region-mv-wrap .lyt-ticket .ticket { padding: 14px 18px 16px; }
    .region-mv-wrap .lyt-ticket .main-copy { font-size: 23px; }
    .region-mv-wrap .lyt-frame .frame-body { left: 22px; right: 22px; bottom: 20px; }
    .region-mv-wrap .lyt-frame .main-copy { font-size: 24px; }
    .region-mv-wrap .lyt-frame .frame-tag { left: 24px; font-size: 14px; padding: 6px 16px; }

    /* panel: 縦積み（画像を上、パネルを下） */
    .region-mv-wrap .banner-container.lyt-panel-l,
    .region-mv-wrap .banner-container.lyt-panel-r {
        display: flex; flex-direction: column; height: auto; min-height: 0;
    }
    .region-mv-wrap .lyt-panel-r { flex-direction: column; }
    .region-mv-wrap .lyt-panel-l .img-area,
    .region-mv-wrap .lyt-panel-r .img-area { order: -1; min-height: 150px; }
    .region-mv-wrap .lyt-panel-l .panel,
    .region-mv-wrap .lyt-panel-r .panel { padding: 16px 18px; align-items: flex-start; text-align: left; }
    .region-mv-wrap .lyt-panel-r .panel { align-items: flex-start; text-align: left; }
    .region-mv-wrap .lyt-panel-l .panel::after,
    .region-mv-wrap .lyt-panel-r .panel::before { display: none; }
    .region-mv-wrap .lyt-panel-l .main-copy,
    .region-mv-wrap .lyt-panel-r .main-copy { font-size: 26px; }
    .region-mv-wrap .lyt-panel-r .area-text,
    .region-mv-wrap .lyt-panel-r .features { align-self: flex-start; justify-content: flex-start; }
    .region-mv-wrap .lyt-panel-l .badge-cheapest,
    .region-mv-wrap .lyt-panel-r .badge-cheapest { top: 10px; right: 12px; left: auto; font-size: 13px; padding: 3px 10px; }
}

/* =========================================================================
   スマホ追補：絶対配置のバッジ／レイアウトと本文の重なり解消、および
   画像主役レイアウト(card/ticket/frame)を「上に画像・下にパネル」へ再構成。
   ※ sample で確認済みの内容を .region-mv-wrap スコープで反映。
   ========================================================================= */
@media screen and (max-width: 767px) {

    /* --- 円バッジ：小さくして角に固定し、本文の頭に余白を確保 --- */
    .region-mv-wrap .bdg-circle { width: 54px; height: 54px; font-size: 10px; line-height: 1.15; top: 10px; right: 10px; }
    .region-mv-wrap .al-right .bdg-circle { left: 10px; right: auto; }
    .region-mv-wrap .banner-container:has(.bdg-circle) .content { padding-top: 70px; }

    /* --- リボン：上端へ寄せ、本文の頭に余白を確保 --- */
    .region-mv-wrap .bdg-ribbon { top: 4px; }
    .region-mv-wrap .banner-container:has(.bdg-ribbon) .content { padding-top: 44px; }

    /* --- スタンプ：通常は右下／ met-side では右上に出るので向きに応じて余白 --- */
    .region-mv-wrap .banner-container:not(.met-side):not(.met-band):has(.bdg-stamp) .content,
    .region-mv-wrap .banner-container:not(.met-side):not(.met-band):has(.bdg-stamp-right) .content { padding-bottom: 58px; }
    .region-mv-wrap .met-side:has(.bdg-stamp) .content,
    .region-mv-wrap .met-side:has(.bdg-stamp-right) .content { padding-top: 62px; }
    .region-mv-wrap .met-band:has(.bdg-stamp) .content,
    .region-mv-wrap .met-band:has(.bdg-stamp-right) .content { padding-bottom: 120px; }

    /* --- エリア名ラベルは折り返さない --- */
    .region-mv-wrap .area-text { white-space: nowrap; }

    /* === strip-top：絶対配置をやめ「帯 → 画像 → 本文」の縦並びに === */
    .region-mv-wrap .banner-container.lyt-strip-top { display: flex; flex-direction: column; height: auto; }
    .region-mv-wrap .lyt-strip-top .top-band { position: relative; z-index: 6; }
    .region-mv-wrap .lyt-strip-top .strip-body { position: relative; z-index: 5; margin-top: auto; }

    /* === sheet-bot：「上ラベル → 画像 → 下シート」の縦並び＋縦幅確保 === */
    .region-mv-wrap .banner-container.lyt-sheet-bot { display: flex; flex-direction: column; height: auto; min-height: 360px; }
    .region-mv-wrap .lyt-sheet-bot .area-text-top { position: relative; z-index: 6; align-self: flex-start; margin: 12px 0 0 12px; top: auto; left: auto; }
    .region-mv-wrap .lyt-sheet-bot .sheet { position: relative; z-index: 5; margin-top: auto; }

    /* === card(ダーク) / ticket(白) / frame(ダーク) ===
       「上に画像エリア(.m-photo)・下にPC配色パネル」の縦並びに再構成。
       画像は .m-photo に PCと同じ background-position で表示し、PCで見えている部分を維持。 */
    .region-mv-wrap .banner-container.lyt-card,
    .region-mv-wrap .banner-container.lyt-ticket,
    .region-mv-wrap .banner-container.lyt-frame {
        position: relative;
        display: flex; flex-direction: column; align-items: stretch;
        height: auto; min-height: 0; padding: 0;
        background-image: none !important;   /* 写真は .m-photo 側で表示 */
    }
    .region-mv-wrap .lyt-card .overlay,
    .region-mv-wrap .lyt-ticket .overlay,
    .region-mv-wrap .lyt-frame .overlay { display: none; }

    /* 上部の画像エリア（PCと同じ background-position で重要部分を表示） */
    .region-mv-wrap .m-photo { display: block; width: 100%; height: 190px; background-size: cover; background-repeat: no-repeat; }

    /* frame のエリア名タグは画像の左上に重ねる */
    .region-mv-wrap .lyt-frame .frame-tag {
        position: absolute; top: 10px; left: 10px; z-index: 6;
        align-self: auto; margin: 0; border-radius: 6px;
        background: var(--accent); color: #111; padding: 5px 14px; font-size: 14px;
    }

    /* 下部パネル：全幅・縦並び。配色はPC版を踏襲（文字色・指標色はPC定義を流用） */
    .region-mv-wrap .lyt-card .card,
    .region-mv-wrap .lyt-ticket .ticket,
    .region-mv-wrap .lyt-frame .frame-body {
        position: relative; z-index: 5; margin: 0; max-width: none; width: 100%;
        border-radius: 0; box-shadow: none;
        padding: 14px 16px 16px; text-align: left;
        left: auto; right: auto; bottom: auto;
        display: flex; flex-direction: column; gap: 8px;
    }
    .region-mv-wrap .lyt-card .card        { background: #101116; border: none; border-top: 4px solid var(--accent); }
    .region-mv-wrap .lyt-ticket .ticket    { background: #ffffff; border: none; border-top: 4px solid var(--primary); }
    .region-mv-wrap .lyt-frame .frame-body { background: #101116; border: none; border-top: 4px solid var(--accent); }

    .region-mv-wrap .lyt-card .header, .region-mv-wrap .lyt-ticket .header { justify-content: flex-start; gap: 8px; align-items: center; }
    .region-mv-wrap .lyt-card .features, .region-mv-wrap .lyt-ticket .features, .region-mv-wrap .lyt-frame .features,
    .region-mv-wrap .lyt-card .metrics-group, .region-mv-wrap .lyt-ticket .metrics-group, .region-mv-wrap .lyt-frame .metrics-group { justify-content: flex-start; flex-wrap: wrap; gap: 8px; margin: 0; }
    .region-mv-wrap .lyt-card .main-copy, .region-mv-wrap .lyt-ticket .main-copy, .region-mv-wrap .lyt-frame .main-copy { font-size: 22px; margin: 0; line-height: 1.2; }
}