/* ======================================
   トップビューアニメーション スタイル（修正版）
   clamp計算の詳細説明付き
   ====================================== */

/* ======================================
   基本レイアウト
   ====================================== */
.mv-section {
    position: relative;
    width: 100%;
    height: 100vh;
    /* SVGがはみ出すことを許可 */
    overflow: visible;
}

/* レイヤー管理 */
.mv-bg-layer { 
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: calc(100vh + 75px);
    z-index: 1;
}

.mv-curtain-layer { 
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 10;
}

.mv-main-copy { 
    position: absolute;
    z-index: 20;
}

.mv-main-visual { 
    position: absolute;
    z-index: 15;
}

.mv-sub-copy { 
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 16;
    pointer-events: none;
}

.mv-sub-copy > * {
    position: absolute;
}

/* ======================================
   背景画像
   ====================================== */
.mv-bg-image {
    width: 100%;
    height: 100%;
    object-fit: cover;
    /* 初期状態：2.5倍にズームインされている */
    opacity: 0.7;
    transform: scale(2.5);
    /* 最初の85%はゆっくり、最後の15%で急加速（2.8秒） */
    transition: transform 2.8s cubic-bezier(0.85, 0, 0.03, 1), opacity 2.8s ease-out;
}

/* 第1段階：4.6秒時点で1.1倍まで（カーテンが開くとき） */
.animate-bg-zoom:not(.animate-bg-final) .mv-bg-image {
    opacity: 1;
    transform: scale(1.1);
}

/* 第2段階：8秒かけて1倍まで（ゆっくりとしたズームアウト） */
.animate-bg-zoom.animate-bg-final .mv-bg-image {
    opacity: 1;
    transform: scale(1);
    transition: transform 8s ease-out, opacity 2.8s ease-out;
}

/* ======================================
   紺色カーテン
   ====================================== */
.mv-curtain-top,
.mv-curtain-bottom {
    position: absolute;
    width: 100%;
    background-color: #001741;
    transform-origin: center;
    transition: transform 1.5s linear; /* 一定速度に変更 */
}

.mv-curtain-top { 
    top: 0;
    height: 66%; /* 32%の角度差をカバーするため高さを増やす */
    /* より急な角度に調整 */
    /* 上カーテン：左側100%、右側68%（32%の差） */
    clip-path: polygon(0 0, 100% 0, 100% 68%, 0 100%);
}

.mv-curtain-bottom { 
    bottom: 0;
    height: 66%; /* 32%の角度差をカバーするため高さを増やす */
    /* より急な角度に調整 */
    /* 下カーテン：左側32%、右側0%（32%の差） */
    clip-path: polygon(0 32%, 100% 0, 100% 100%, 0 100%);
}

/* アニメーション第1段階：斜めに開く（前半を速く、65%まで開く） */
.animate-phase1 .mv-curtain-top {
    transform: translateY(-65%);
}

.animate-phase1 .mv-curtain-bottom {
    transform: translateY(65%);
}

/* アニメーション第2段階：完全に開く */
.animate-phase2 .mv-curtain-top {
    transform: translateY(-100%);
}

.animate-phase2 .mv-curtain-bottom {
    transform: translateY(100%);
}

/* メインコピー動画のワイプ表示 */
.animate-main-copy .mv-main-copy {
    clip-path: inset(0 0 0 0); /* 左から右へワイプで表示 */
}

/* サブコピー画像の同時表示 */
.animate-sub-copy .mv-sub-copy-1,
.animate-sub-copy .mv-sub-copy-2,
.animate-sub-copy .mv-sub-copy-3,
.animate-sub-copy .mv-sub-copy-4 {
    transform: translateX(0);
    opacity: 1;
}

/* ======================================
   メインコピー動画
   計算式：
   1920px時 → 390px時
   top: 290px → 222px
   left: 327px → 10px
   width: 1200px → 330px
   height: 358px → 349px
   ====================================== */
.mv-main-copy {
    /* Top計算: 290px(18.125rem) → 222px(13.875rem)
       差分: 68px / 1530px = 0.0444 = 4.44vw
       切片: 222px - (0.0444 × 390) = 222 - 17.32 = 204.68px = 12.793rem */
    top: clamp(13.875rem, 12.793rem + 4.44vw, 18.125rem);
    
    /* Left計算: 327px(20.438rem) → 10px(0.625rem)
       差分: 317px / 1530px = 0.2072 = 20.72vw
       切片: 10px - (0.2072 × 390) = 10 - 80.81 = -70.81px = -4.426rem */
    left: clamp(1.25rem, -3.641rem + 20.066vw, 20.438rem);
    
    /* Width計算: 1300px(81.25rem) → 340px(21.25rem)
       差分: 960px / 1530px = 0.6275 = 62.75vw
       切片: 340px - (0.6275 × 390) = 340 - 244.73 = 95.27px = 5.954rem */
    width: clamp(21.25rem, 5.954rem + 62.75vw, 81.25rem);

    /* Height計算: 420px(26.25rem) → 359px(22.438rem)
       差分: 61px / 1530px = 0.0399 = 3.99vw
       切片: 359px - (0.0399 × 390) = 359 - 15.56 = 343.44px = 21.465rem */
    height: clamp(22.438rem, 21.465rem + 3.99vw, 26.25rem);
    
    /* 初期状態：位置は固定、左からワイプで表示 */
    transform: translateX(0);
    opacity: 1;
    clip-path: inset(0 100% 0 0); /* 右側を100%隠す */
    transition: clip-path 0.5s ease-out;
}

.mv-main-copy-video {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: contain;
    pointer-events: none;
}

/* デスクトップ用 */
.mv-main-copy-desktop { display: block; }
.mv-main-copy-mobile { display: none; }

/* モバイル用切り替え */
@media (max-width: 767px) {
    .mv-main-copy-desktop { display: none; }
    .mv-main-copy-mobile { display: block; }
}

/* ======================================
   メインビジュアル画像（メインコピー下）
   計算式：
   1920px時 → 390px時
   top: 110px → 357px
   left: 730px → 87px
   width: 425px → 217px
   height: 790px → 691px
   ====================================== */
.mv-main-visual {
    /* Top計算: 110px(6.875rem) → 357px(22.313rem)
       差分: -247px / 1530px = -0.1614 = -16.14vw
       切片: 357px - (-0.1614 × 390) = 357 + 62.95 = 419.95px = 26.247rem */
    top: clamp(13.313rem, 14.954rem + -6.733vw, 6.875rem);
    
    /* Left計算: 730px(45.625rem) → 87px(5.438rem)
       差分: 643px / 1530px = 0.4203 = 42.03vw
       切片: 87px - (0.4203 × 390) = 87 - 163.92 = -76.92px = -4.808rem */
    left: clamp(5.438rem, -4.808rem + 42.03vw, 45.625rem);
    
    /* Width計算: 425px(26.563rem) → 217px(13.563rem)
       差分: 208px / 1530px = 0.1359 = 13.59vw
       切片: 217px - (0.1359 × 390) = 217 - 53.00 = 164px = 10.25rem */
    width: clamp(13.563rem, 10.25rem + 13.59vw, 26.563rem);
    
    /* Height計算: 790px(49.375rem) → 691px(43.188rem)
       差分: 99px / 1530px = 0.0647 = 6.47vw
       切片: 691px - (0.0647 × 390) = 691 - 25.23 = 665.77px = 41.611rem */
    height: clamp(43.188rem, 41.611rem + 6.47vw, 49.375rem);
}

.mv-main-visual img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

/* ======================================
   サブコピー要素
   ====================================== */

/* サブコピー1
   1920px時 → 390px時
   top: 185px → 132px
   left: 130px → 24px
   width: 420px → 196px
   height: 115px → 54px */
.mv-sub-copy-1 {
    /* Top計算: 185px(11.563rem) → 132px(8.25rem)
       差分: 53px / 1530px = 0.0346 = 3.46vw
       切片: 132px - (0.0346 × 390) = 132 - 13.49 = 118.51px = 7.407rem */
    top: clamp(8.25rem, 7.407rem + 3.46vw, 11.563rem);

    /* Left計算: 130px(8.125rem) → 24px(1.5rem)
       差分: 106px / 1530px = 0.0693 = 6.93vw
       切片: 24px - (0.0693 × 390) = 24 - 27.03 = -3.03px = -0.189rem */
    left: clamp(1.5rem, -0.189rem + 6.93vw, 8.125rem);

    /* Width計算: 420px(26.25rem) → 196px(12.25rem)
       差分: 224px / 1530px = 0.1464 = 14.64vw
       切片: 196px - (0.1464 × 390) = 196 - 57.10 = 138.90px = 8.681rem */
    width: clamp(12.25rem, 8.681rem + 14.64vw, 26.25rem);

    /* Height計算: 115px(7.188rem) → 54px(3.375rem)
       差分: 61px / 1530px = 0.0399 = 3.99vw
       切片: 54px - (0.0399 × 390) = 54 - 15.56 = 38.44px = 2.403rem */
    height: clamp(3.375rem, 2.403rem + 3.99vw, 7.188rem);

    /* 初期状態：左から表示 */
    transform: translateX(-50px);
    opacity: 0;
    transition: transform 0.7s ease-out, opacity 0.7s ease-out;
}

/* サブコピー2
   1920px時 → 390px時
   top: 0px → 0px
   right: 0px → 0px
   width: 72px → 51px
   height: 543px → 387px */
.mv-sub-copy-2 {
    top: 0;
    right: 0;

    /* Width計算: 72px(4.5rem) → 51px(3.188rem)
       差分: 21px / 1530px = 0.0137 = 1.37vw
       切片: 51px - (0.0137 × 390) = 51 - 5.34 = 45.66px = 2.854rem */
    width: clamp(3.188rem, 2.854rem + 1.37vw, 4.5rem);

    /* Height計算: 543px(33.938rem) → 387px(24.188rem)
       差分: 156px / 1530px = 0.102 = 10.2vw
       切片: 387px - (0.102 × 390) = 387 - 39.78 = 347.22px = 21.701rem */
    height: clamp(24.188rem, 21.701rem + 10.2vw, 33.938rem);

    /* 初期状態：右から表示 */
    transform: translateX(50px);
    opacity: 0;
    transition: transform 0.7s ease-out, opacity 0.7s ease-out;
}

/* サブコピー3
   1920px時 → 390px時
   top: 781px → 691px
   left: 0px → 0px
   width: 900px → 390px
   height: 119px → 52px */
.mv-sub-copy-3 {
    /* Top計算: 781px(48.813rem) → 691px(43.188rem)
       差分: 90px / 1530px = 0.0588 = 5.88vw
       切片: 691px - (0.0588 × 390) = 691 - 22.93 = 668.07px = 41.754rem */
    top: clamp(43.25rem, 41.657rem + 6.536vw, 49.5rem);
    
    left: 0;
    
    /* Width計算: 900px(56.25rem) → 390px(24.375rem)
       差分: 510px / 1530px = 0.3333 = 33.33vw
       切片: 390px - (0.3333 × 390) = 390 - 130 = 260px = 16.25rem */
    width: clamp(24.375rem, 16.25rem + 33.33vw, 56.25rem);
    
    /* Height計算: 119px(7.438rem) → 52px(3.25rem)
       差分: 67px / 1530px = 0.0438 = 4.38vw
       切片: 52px - (0.0438 × 390) = 52 - 17.08 = 34.92px = 2.183rem */
    height: clamp(3.25rem, 2.183rem + 4.38vw, 7.438rem);
    
    /* 初期状態：左から表示 */
    transform: translateX(-50px);
    opacity: 0;
    transition: transform 0.7s ease-out, opacity 0.7s ease-out;
}

/* サブコピー4
   1920px時 → 390px時
   top: 635px → 616px
   right: 1px → 0px
   width: 657px → 200px
   height: 126px → 55px */
.mv-sub-copy-4 {
    /* Top計算: 635px(39.688rem) → 616px(38.5rem)
       差分: 19px / 1530px = 0.0124 = 1.24vw
       切片: 616px - (0.0124 × 390) = 616 - 4.84 = 611.16px = 38.198rem */
    top: clamp(38.5rem, 38.054rem + 1.83vw, 40.25rem);

    /* Right計算: 1px(0.063rem) → 0px(0rem)
       差分: 1px / 1530px = 0.00065 = 0.065vw
       切片: 0px - (0.00065 × 390) = 0 - 0.25 = -0.25px = -0.016rem */
    right: clamp(0rem, -0.016rem + 0.065vw, 0.063rem);

    /* Width計算: 657px(41.063rem) → 200px(12.5rem)
       差分: 457px / 1530px = 0.2987 = 29.87vw
       切片: 200px - (0.2987 × 390) = 200 - 116.49 = 83.51px = 5.219rem */
    width: clamp(12.5rem, 5.219rem + 29.87vw, 41.063rem);

    /* Height計算: 126px(7.875rem) → 55px(3.438rem)
       差分: 71px / 1530px = 0.0464 = 4.64vw
       切片: 55px - (0.0464 × 390) = 55 - 18.10 = 36.90px = 2.306rem */
    height: clamp(3.438rem, 2.306rem + 4.64vw, 7.875rem);
    
    /* 初期状態：右から表示 */
    transform: translateX(50px);
    opacity: 0;
    transition: transform 0.7s ease-out, opacity 0.7s ease-out;
}

.mv-sub-copy img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

/* ======================================
   実績オーバーレイ（tp_about）
   計算式：
   1920px時 → 390px時
   top: 811px → 710px
   ====================================== */
.mv-achievement-overlay {
    position: absolute;
    /* Top計算: 811px(50.688rem) → 710px(44.375rem)
       差分: 101px / 1530px = 0.066 = 6.6vw
       切片: 710px - (0.066 × 390) = 710 - 25.74 = 684.26px = 42.766rem */
    top: clamp(44.375rem, 42.766rem + 6.6vw, 50.688rem);
    left: 0;
    width: 100%;
    z-index: 25;
    /* 初期状態（アニメーション用） - 一時的に表示 */
    /* transform: translateY(100%); */
    transform: translateY(0);
    /* オーバーフローを許可（100vhを超えても表示） */
    overflow: visible;
}

/* SVGのスタイル */
.mv-achievement-svg {
    width: 100%;
    height: auto;
}

/* デスクトップ用SVG（900px画面高で269px、それ以上は画面高さの30%） */
.mv-achievement-svg-desktop {
    display: block;
    height: max(269px, 30vh); /* 最小269px、画面高さの30% */
    width: 100%;
}

.mv-achievement-svg-mobile {
    display: none;
}

/* モバイル表示時の切り替え */
@media (max-width: 767px) {
    .mv-achievement-svg-desktop {
        display: none;
    }
    
    .mv-achievement-svg-mobile {
        display: block;
    }
    .mv-bg-layer { 
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: calc(100vh);
        z-index: 1;
    }
}

/* tp_aboutセクションとの重なり調整 */
.mv-section {
    position: relative;
    z-index: 1;
}

/* 実際のtp_aboutセクションがある場合の調整 */
.tp_about {
    position: relative;
    z-index: 30; /* SVG(z-index: 25)より上に表示 */
    /* マージンを削除（100vh以降に配置） */
    margin-top: 6rem;

}

@media (max-width: 1920px) {
    .tp_about {
        margin-top: 75px;
    }
}

/* ======================================
   ヘッダー初期状態
   ====================================== */
.header_main.mv-hidden {
    transform: translateY(-120%);
    opacity: 0;
    transition: transform 0.9s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.9s cubic-bezier(0.4, 0, 0.2, 1);
}

.header_main.mv-hidden.mv-show {
    transform: translateY(0);
    opacity: 1;
}

/* ======================================
   フローティングバナー（レイヤー6）
   ====================================== */
.mv-floating-banner {
    position: absolute;
    /* Position - clamp(390px値, 計算式, 1920px値) */
    top: clamp(39.625rem, 38.924rem + 2.876vw, 42.375rem);
    right: clamp(1.75rem, 1.208rem + 2.222vw, 3.875rem);
    
    /* Size - clamp(390px値, 計算式, 1920px値) */
    width: clamp(10.731rem, 9.515rem + 4.987vw, 15.5rem);
    height: clamp(8.308rem, 7.366rem + 3.862vw, 12rem);
    
    z-index: 50; /* 全ての要素より上に表示 */
    
    /* 初期状態：下に隠れている */
    transform: translateY(120%);
    opacity: 0;
    transition: transform 0.9s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.9s cubic-bezier(0.4, 0, 0.2, 1);
}

html.no-scroll,
body.no-scroll {
    overflow: hidden;
    height: 100%;
}

body.no-scroll {
    position: fixed;
    inset: 0;
    width: 100%;
    touch-action: none;
}

.mv-floating-banner-link {
    display: block;
    width: 100%;
    height: 100%;
}

/* アニメーション実行時：下から上へ表示 */
.mv-floating-banner.mv-show {
    transform: translateY(0);
    opacity: 1;
}

/* バナー画像 */
.mv-floating-banner-image {
    width: 100%;
    height: 100%;
    object-fit: contain;
    display: block;
}

/* ×ボタン */
.mv-floating-banner-close {
    position: absolute;
    /* Position（バナー画像に対する相対位置） - clamp(最小値, 可変値, 最大値) */
    /* 390px時: -8px(-0.5rem), 1920px時: -12px(-0.75rem) */
    /* 計算: vw係数 = (-12 - (-8)) / (1920 - 390) × 100 = -0.261vw */
    /* 切片 = -8 - (-0.261 × 390 / 100) = -6.98px = -0.436rem */
    top: clamp(-0.75rem, -0.436rem - 0.261vw, -0.5rem);
    right: clamp(-0.75rem, -0.436rem - 0.261vw, -0.5rem);
    
    /* Size - clamp(390px値, 計算式, 1920px値) */
    width: clamp(1.731rem, 1.535rem + 0.804vw, 2.5rem);
    height: clamp(1.731rem, 1.535rem + 0.804vw, 2.5rem);
    
    padding: 0;
    border: none;
    background: none;
    cursor: pointer;
    filter: drop-shadow(4px 4px 6px rgba(0, 0, 0, 0.30));
    transition: transform 0.2s ease;
}

.mv-floating-banner-close:hover {
    transform: scale(1.1);
}

.mv-floating-banner-close:active {
    transform: scale(0.95);
}

.mv-floating-banner-close img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

/* 非表示状態 */
.mv-floating-banner.hidden {
    opacity: 0;
    transform: translateX(50%);
    pointer-events: none;
}

/* ======================================
   デバッグモード（開発時のみ）
   ====================================== */
.debug-mode .mv-section * {
    outline: 1px solid rgba(255, 0, 0, 0.3);
}

.debug-mode .mv-main-copy {
    outline: 2px solid red;
}

.debug-mode .mv-sub-copy > * {
    outline: 2px solid blue;
}