@charset "UTF-8";
/* ==================================================================
 * 大阪スタジオ トップ メインビジュアル（2026-10 デザインカンプ準拠）
 *
 * カンプ: PC 1440×762 / SP 375×450（いずれもヘッダー下の表示領域）
 * 数値はカンプのpx値そのまま。--u（1pxの換算値）を掛けて、画面幅に比例して拡大縮小する。
 *   PC（600px以上）: --u = 表示幅 / 1440（1440px以上は1440pxで固定し中央寄せ。背景だけ全幅）
 *   SP（599px以下）: --u = 表示幅 / 375
 * 固定ヘッダー分の余白: 〜768px 50px / 769〜1249px 62px / 1250px〜 85px（osaka.css のヘッダー高さ）
 * ================================================================== */

.osaka-mv {
    --u: calc(min(100vw, 1440px) / 1440);
    padding-top: 50px;
    background: #fff;
    container-type: inline-size;
    overflow: hidden;
}
@supports (width: 1cqw) {
    .osaka-mv { --u: calc(min(100cqw, 1440px) / 1440); }
}
@media screen and (min-width: 769px)  { .osaka-mv { padding-top: 62px; } }
@media screen and (min-width: 1250px) { .osaka-mv { padding-top: 85px; } }

.osaka-mv__bg {
    background: url("../studio-img/osaka-new-mv-bg.webp") no-repeat center center / cover;
}
.osaka-mv__stage {
    position: relative;
    width: calc(var(--u) * 1440);
    height: calc(var(--u) * 762);
    margin: 0 auto;
}
.osaka-mv__stage > * {
    position: absolute;
    margin: 0;
    padding: 0;
    line-height: 1;
    white-space: nowrap;
    font-family: "Noto Sans JP", sans-serif;
    text-shadow: none;
}

/* ---- 人物 ---- */
.osaka-mv__people {
    z-index: 1;
    left: calc(var(--u) * 14);
    bottom: 0;
    width: calc(var(--u) * 630);
}
.osaka-mv__people img {
    display: block;
    width: 100%;
    height: auto;
    max-width: none;
}

/* ---- テキスト共通 ---- */
.osaka-mv__lead,
.osaka-mv__sub,
.osaka-mv__catch {
    z-index: 3;
    color: #fff;
    font-weight: 700;
}
.osaka-mv__lead .is-accent { color: #C0D740; }
.osaka-mv__sub .sp-only,
.osaka-mv__catch .sp-only { display: none; }

.osaka-mv__lead  { left: calc(var(--u) * 675); top: calc(var(--u) * 53);  font-size: calc(var(--u) * 35.5); letter-spacing: calc(var(--u) * 3.53); }
.osaka-mv__sub   { left: calc(var(--u) * 650); top: calc(var(--u) * 110); font-size: calc(var(--u) * 35);   letter-spacing: calc(var(--u) * 4.62); }
.osaka-mv__catch--1 { left: calc(var(--u) * 638); top: calc(var(--u) * 466); font-size: calc(var(--u) * 35); letter-spacing: calc(var(--u) * 4.59); }
.osaka-mv__catch--2 { left: calc(var(--u) * 697); top: calc(var(--u) * 522); font-size: calc(var(--u) * 36); letter-spacing: calc(var(--u) * 3.57); }

/* ---- 黒帯 ---- */
.osaka-mv__box {
    z-index: 2;
    background: #000;
    color: #fff;
    font-weight: 900;
}
.osaka-mv__box > span { position: absolute; line-height: 1; }
.osaka-mv__box.osaka-mv__box--green { color: #C0D740; }
.osaka-mv__box--1 { left: calc(var(--u) * 745); top: calc(var(--u) * 180); width: calc(var(--u) * 471); height: calc(var(--u) * 124); }
.osaka-mv__box--1 > span { left: calc(var(--u) * 25); top: calc(var(--u) * 24); font-size: calc(var(--u) * 69.5); letter-spacing: calc(var(--u) * 0.4); }
.osaka-mv__box--2 { left: calc(var(--u) * 634); top: calc(var(--u) * 312); width: calc(var(--u) * 693); height: calc(var(--u) * 124); }
.osaka-mv__box--2 > span { left: calc(var(--u) * 31); top: calc(var(--u) * 28); font-size: calc(var(--u) * 69.5); letter-spacing: 0; }
.osaka-mv__box--3 { display: none; }

/* ---- CTA ---- */
.osaka-mv__cta {
    z-index: 4;
    left: calc(var(--u) * 702);
    top: calc(var(--u) * 599);
    width: calc(var(--u) * 558);
    line-height: 0;
    transition: opacity .3s;
}
.osaka-mv__cta img { display: block; width: 100%; height: auto; max-width: none; }
.osaka-mv__cta:hover { opacity: .85; }

/* ==================================================================
 * SP（599px以下）カンプ 375×450
 * ================================================================== */
@media screen and (max-width: 599.98px) {
    .osaka-mv { --u: calc(100vw / 375); }
    @supports (width: 1cqw) {
        .osaka-mv { --u: calc(100cqw / 375); }
    }
    .osaka-mv__bg {
        background-size: calc(var(--u) * 996) calc(var(--u) * 527);
        background-position: calc(var(--u) * -244) calc(var(--u) * -4);
    }
    .osaka-mv__stage {
        width: 100%;
        height: calc(var(--u) * 450);
    }
    .osaka-mv__people { left: calc(var(--u) * -23); top: calc(var(--u) * 55); bottom: auto; width: calc(var(--u) * 233); }

    /* 見出し（白い吹き出し） */
    .osaka-mv__lead {
        left: calc(var(--u) * 10);
        top: calc(var(--u) * 20);
        width: calc(var(--u) * 355);
        height: calc(var(--u) * 37);
        box-sizing: border-box;
        background: #fff;
        border: calc(var(--u) * 2) solid #000;
        color: #333;
        font-size: calc(var(--u) * 18.5);
        letter-spacing: calc(var(--u) * 2.07);
        padding: calc(var(--u) * 8) 0 0 calc(var(--u) * 12);
        z-index: 5;
    }
    .osaka-mv__lead .is-accent { color: #FE544D; }
    .osaka-mv__lead::after {
        content: "";
        position: absolute;
        left: 50%;
        top: 100%;
        margin-left: calc(var(--u) * -5.5);
        border-top: calc(var(--u) * 8) solid #000;
        border-left: calc(var(--u) * 5.5) solid transparent;
        border-right: calc(var(--u) * 5.5) solid transparent;
    }

    .osaka-mv__sub { left: calc(var(--u) * 202); top: calc(var(--u) * 77); font-size: 0; letter-spacing: 0; }
    .osaka-mv__sub > span { position: absolute; display: block; }
    .osaka-mv__sub .sp-only { display: none; }
    .osaka-mv__sub > span:nth-child(1) { left: calc(var(--u) * 8); top: 0; font-size: calc(var(--u) * 14); letter-spacing: calc(var(--u) * 1.29); }
    .osaka-mv__sub > span:nth-child(3) { left: 0; top: calc(var(--u) * 20); font-size: calc(var(--u) * 13); letter-spacing: calc(var(--u) * 2.38); }

    .osaka-mv__box--1 { left: calc(var(--u) * 173); top: calc(var(--u) * 120); width: calc(var(--u) * 192); height: calc(var(--u) * 40); }
    .osaka-mv__box--1 > span { left: calc(var(--u) * 11); top: calc(var(--u) * 7); font-size: calc(var(--u) * 26.5); letter-spacing: calc(var(--u) * 2.2); }
    .osaka-mv__box--2 { left: calc(var(--u) * 217); top: calc(var(--u) * 163); width: calc(var(--u) * 102); height: calc(var(--u) * 40); }
    .osaka-mv__box--2 > span { left: calc(var(--u) * 9); top: calc(var(--u) * 6); font-size: calc(var(--u) * 28.25); letter-spacing: 0; }
    .osaka-mv__box--2 .pc-only { display: none; }
    .osaka-mv__box--3 { display: block; left: calc(var(--u) * 173); top: calc(var(--u) * 206); width: calc(var(--u) * 192); height: calc(var(--u) * 40); }
    .osaka-mv__box--3 > span { left: calc(var(--u) * 9); top: calc(var(--u) * 6); font-size: calc(var(--u) * 27); letter-spacing: calc(var(--u) * 2); }

    .osaka-mv__catch { font-size: 0; letter-spacing: 0; }
    .osaka-mv__catch > span { position: absolute; display: block; }
    .osaka-mv__catch--1 { left: calc(var(--u) * 189); top: calc(var(--u) * 260); }
    .osaka-mv__catch--1 > span:nth-child(1) { left: calc(var(--u) * 17); top: 0; font-size: calc(var(--u) * 14.75); letter-spacing: calc(var(--u) * 3); }
    .osaka-mv__catch--1 > span:nth-child(3) { left: 0; top: calc(var(--u) * 20); font-size: calc(var(--u) * 14.75); letter-spacing: calc(var(--u) * 2.78); }
    .osaka-mv__catch--2 { left: calc(var(--u) * 207); top: calc(var(--u) * 299); }
    .osaka-mv__catch--2 > span:nth-child(1) { left: calc(var(--u) * 7); top: 0; font-size: calc(var(--u) * 15.25); letter-spacing: calc(var(--u) * 2.33); }
    .osaka-mv__catch--2 > span:nth-child(3) { left: 0; top: calc(var(--u) * 22); font-size: calc(var(--u) * 13.75); letter-spacing: calc(var(--u) * 3.86); }

    .osaka-mv__cta { left: calc(var(--u) * 10); top: calc(var(--u) * 356); width: calc(var(--u) * 355); }
}