/* ============================================================
   VIVASO PAGE
   ============================================================ */
.vivaso-page {
    background: var(--cream);
}

/* ============================================================
   HERO  bg:#1F2022  h:773px
   ============================================================ */
.vv-hero {
    background: #1F2022;
    height: 773px;
    overflow: hidden;
    position: relative;
}

.vv-hero__video {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    z-index: 0;
}

.vv-hero__overlay {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.5);
    z-index: 1;
}

.vv-hero__inner {
    position: relative;
    z-index: 2;
    display: flex;
    align-items: center;
    gap: 109px;
    padding-top: 294px;
    padding-left: 80px;
}

/* 左コンテンツ（width:848px） */
.vv-hero__left {
    width: 848px;
    flex-shrink: 0;
    display: flex;
    flex-direction: column;
    gap: 44px;
}

/* ブランドエリア：相対コンテナ(h:123px w:383px) */
.vv-hero__brand {
    position: relative;
    height: 123px;
    width: 383px;
}

/* サブタイトル：絶対配置 top:0 */
.vv-hero__brand-sub {
    position: absolute;
    top: 0;
    left: 0;
    font-family: var(--font-jp);
    font-size: 16px;
    font-weight: 400;
    line-height: 1.8;
    color: #FFFFFF;
    white-space: nowrap;
}

/* ブランド名：中心 left:191.5px top:73px */
.vv-hero__brand-name {
    position: absolute;
    left: 191.5px;
    top: 73px;
    transform: translate(-50%, -50%);
    font-family: var(--font-brand);
    font-size: 100px;
    font-weight: 700;
    color: #4E6079;
    line-height: 1;
    text-align: center;
    white-space: nowrap;
}

/* 説明文 + CTAボタン */
.vv-hero__desc-block {
    display: flex;
    flex-direction: column;
    gap: 32px;
}

.vv-hero__desc {
    color: #F5F0E8;
}
.vv-hero__desc p { margin-bottom: 0; }

/* CTAはtealのピルボタン（px:44 py:12 rounded:32） */
.vv-hero__cta {
    display: inline-flex;
    align-items: center;
    gap: 16px;
    background: #0E9A8F;
    padding: 12px 44px;
    border-radius: 32px;
    color: #F5F0E8;
    text-decoration: none;
    align-self: flex-start;
    transition: background 0.2s;
}
.vv-hero__cta:hover { background: #0B8A80; }
.vv-hero__cta .btn-circle-arrow {
    background: rgba(255, 255, 255, 0.3);
    color: #fff;
}

/* 右ビジュアル（width:323px height:230px） */
.vv-hero__visual {
    flex-shrink: 0;
    width: 323px;
    height: 230px;
}
.vv-hero__img-placeholder {
    width: 100%;
    height: 100%;
    background: rgba(245, 240, 232, 0.08);
    border-radius: 8px;
}

/* ============================================================
   共通：54px 見出し（Shippori Bold）
   ============================================================ */
.vv-headline-64 {
    font-family: var(--font-mincho);
    font-size: 54px;
    font-weight: 500;
    line-height: 1.8;
    color: var(--black);
}

/* ============================================================
   共通：数字インジケーター（DM Sans Bold 44px / Futura代替）
   ============================================================ */
.vv-num {
    font-family: var(--font-en);
    font-size: clamp(28px, 3vw, 44px);
    font-weight: 700;
    color: #F5F0E8;
    line-height: 1;
    flex-shrink: 0;
}
.vv-num--dark {
    color: #364457;
}

/* ============================================================
   PROBLEM  bg:#F5F0E8  arch-top
   ============================================================ */
.vv-problem {
    background: var(--cream);
    border-radius: 280px 280px 0 0;
    padding-bottom: 120px;
}

/* セクションヘッド：pt:120px（Figma top:893 - hero:773 = 120） */
.vv-problem__head {
    padding-top: 120px;
}

/* 見出しブロック：Figma left:523px width:837px */
.vv-problem__headline-block {
    padding-left: 523px;
    padding-right: 80px;
    margin-top: 88px;
    display: flex;
    flex-direction: column;
    gap: 24px;
}

/* カード群（行ごとの千鳥配置） */
.vv-problem__cards {
    padding: 0 clamp(24px, 5.6vw, 80px);
    margin-top: 40px;
    display: flex;
    flex-direction: column;
    gap: 24px;
}

.vv-problem__row {
    display: flex;
    gap: clamp(24px, 16.7vw, 240px);
}

/* 2行目：302px右にずらす（比率維持でスケール） */
.vv-problem__row--2 {
    padding-left: clamp(24px, 21vw, 302px);
}

/* カード（相対コンテナ） */
.vv-problem__card {
    position: relative;
    width: clamp(220px, 25.6vw, 369px);
    height: clamp(180px, 18vw, 260px);
    flex-shrink: 0;
}

/* 背景画像（絶対配置 opacity:0.2） */
.vv-problem__card-img {
    position: absolute;
    top: 0;
    left: 0;
    width: 78.3%;
    height: 74.2%;
    background: #D9D9D9;
    border-radius: 4px;
    opacity: 0.2;
}

/* テキストオーバーレイ（カード高さに対して比率で配置） */
.vv-problem__card-body {
    position: absolute;
    top: 32.7%;
    left: 0;
    width: 100%;
    padding-left: clamp(24px, 3.5vw, 50px);
    display: flex;
    flex-direction: column;
    gap: clamp(8px, 1vw, 16px);
    color: var(--black);
}

/* ============================================================
   WHAT IS VIVASO  bg:#1F2022  arch-top
   ============================================================ */
.vv-what {
    background: #1F2022;
    border-radius: 280px 280px 0 0;
}

/* セクションヘッド：pt:64px（Figma top:64 from section） */
.vv-what__head {
    padding-top: 64px;
}

/* 見出しブロック：pl:80px（Figma left:79） */
.vv-what__headline-block {
    padding-left: 80px;
    padding-right: 80px;
    margin-top: 88px;
    display: flex;
    flex-direction: column;
    gap: 24px;
}

/* 機能エリア（画像+ステップ + 機能ボックス） */
.vv-what__features {
    padding: 0 80px;
    margin-top: 44px;
    display: flex;
    flex-direction: column;
    gap: 68px;
}

/* 画像 + 3ステップ行（gap:106px） */
.vv-what__feature-row {
    display: flex;
    align-items: flex-start;
    gap: 106px;
}

/* 左画像（w:502px h:335px） */
.vv-what__img {
    flex-shrink: 0;
    width: 502px;
    height: 335px;
    border-radius: 8px;
    overflow: hidden;
}
.vv-what__img-placeholder {
    width: 100%;
    height: 100%;
    background: rgba(245, 240, 232, 0.1);
}

/* 右ステップリスト（w:673px） */
.vv-what__steps {
    width: 673px;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
}

/* 各ステップ：border-bottom teal, py:12px, gap:24px */
.vv-what__step {
    border-bottom: 1px solid #0E9A8F;
    display: flex;
    flex-direction: column;
    gap: 24px;
    padding: 12px 0;
    width: 100%;
}

/* 数字 + タイトル行 */
.vv-what__step-head {
    display: flex;
    align-items: center;
    gap: 24px;
    white-space: nowrap;
}

/* ============================================================
   機能ボックス（白い大きなカード）
   bg:#F5F0E8  padding:80px  gap:142px
   ============================================================ */
.vv-what__feature-box {
    background: #F5F0E8;
    display: flex;
    align-items: flex-start;
    gap: 142px;
    padding: 80px;
}

/* 左：ダークカード（主な対応業務） bg:#364457 p:32px rounded:8px */
.vv-what__func-card {
    background: #364457;
    border-radius: 8px;
    padding: 32px;
    display: flex;
    flex-direction: column;
    gap: 24px;
    flex-shrink: 0;
}

/* 機能リスト（pl:24px w:299px gap:16px） */
.vv-func-list {
    display: flex;
    flex-direction: column;
    gap: 16px;
    padding-left: 24px;
    width: 299px;
}
.vv-func-list li {
    display: flex;
    align-items: center;
    gap: 16px;
    font-family: var(--font-jp);
    font-size: 16px;
    font-weight: 400;
    line-height: 1.8;
    color: #F5F0E8;
    white-space: nowrap;
}
.vv-func-list li::before {
    content: '';
    display: block;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #0E9A8F;
    flex-shrink: 0;
}

/* 右：スクリーンショット（1枚大表示） */
.vv-what__screenshots {
    flex: 1;
    display: flex;
    align-items: center;
}
.vv-ss__single {
    width: 100%;
    height: auto;
    border-radius: 8px;
    display: block;
}

/* ============================================================
   FEATURES タブセクション（vv-whatの子）
   Figma: left:347px top:1773px（相対）w:1013px
   ============================================================ */
.vv-features {
    padding-left: 347px;
    padding-right: 80px;
    padding-bottom: 120px;
    margin-top: 224px;
    display: flex;
    flex-direction: column;
    gap: 44px;
}

/* タブコンテナ（bg:rgba(245,240,232,0.4) p:44px gap:124px） */
.vv-tabs {
    background: rgba(245, 240, 232, 0.4);
    display: flex;
    align-items: flex-start;
    gap: 124px;
    padding: 44px;
}

/* 縦並びタブナビ（gap:24px） */
.vv-tab-nav {
    display: flex;
    flex-direction: column;
    gap: 24px;
    flex-shrink: 0;
}

/* タブボタン（w:128px px:24px py:8px rounded:12px Medium 16px） */
.vv-tab-btn {
    width: 128px;
    padding: 8px 24px;
    border-radius: 12px;
    background: #F5F0E8;
    color: var(--black);
    font-family: var(--font-jp);
    font-size: 16px;
    font-weight: 500;
    line-height: 1.8;
    text-align: center;
    transition: background 0.2s var(--ease), color 0.2s var(--ease);
}
.vv-tab-btn.is-active {
    background: #0E9A8F;
    color: #F5F0E8;
}
.vv-tab-btn:not(.is-active):hover {
    opacity: 0.75;
}

/* コンテンツエリア（w:673px） */
.vv-tab-content {
    width: 673px;
}

.vv-tab-panel {
    display: flex;
    flex-direction: column;
    gap: 32px;
}
.vv-tab-panel[hidden] {
    display: none;
}

/* 箇条書きボックス（bg:#364457 p:32px rounded:8px） */
.vv-tab-panel__bullets {
    background: #364457;
    border-radius: 8px;
    padding: 32px;
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.vv-bullet {
    display: flex;
    align-items: center;
    gap: 16px;
    color: #F5F0E8;
}
.vv-bullet::before {
    content: '+';
    display: flex;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    border: 1.5px solid #0E9A8F;
    color: #0E9A8F;
    font-size: 14px;
    line-height: 1;
    font-weight: 400;
    flex-shrink: 0;
    background: transparent;
}

/* ============================================================
   BENEFIT  bg:#F5F0E8  arch-top
   ============================================================ */
.vv-benefit {
    background: var(--cream);
    border-radius: 280px 280px 0 0;
    padding-bottom: 120px;
}

/* セクションヘッド：pt:64px（Figma: top:64 from benefit section） */
.vv-benefit__head {
    padding-top: 64px;
}

/* 内部レイアウト（左テキスト + 右画像 gap:125px） */
.vv-benefit__inner {
    display: flex;
    align-items: flex-start;
    gap: 125px;
    padding: 0 80px;
    margin-top: 88px;
}

/* 左：テキストブロック（w:673px） */
.vv-benefit__text {
    width: 673px;
    flex-shrink: 0;
    display: flex;
    flex-direction: column;
    gap: 24px;
}

/* メリットリスト */
.vv-benefit__list {
    display: flex;
    flex-direction: column;
}

/* 各メリット項目：border-bottom teal, py:12px, gap:24px */
.vv-benefit__item {
    border-bottom: 1px solid #0E9A8F;
    display: flex;
    flex-direction: column;
    gap: 24px;
    padding: 12px 0;
}

/* 数字 + タイトル行 */
.vv-benefit__item-head {
    display: flex;
    align-items: center;
    gap: 24px;
    white-space: nowrap;
}

/* 右：画像（w:563px h:497px mt:84px） */
.vv-benefit__img {
    flex-shrink: 0;
    width: 563px;
    height: 497px;
    margin-top: 84px;
    border-radius: 8px;
    overflow: hidden;
}
.vv-benefit__img-placeholder {
    width: 100%;
    height: 100%;
    background: #D9D9D9;
    opacity: 0.6;
}

/* ============================================================
   実画像スタイル（imgフォルダ画像置き換え後）
   ============================================================ */

/* ヒーロー右ビジュアル */
.vv-hero__visual-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 8px;
}

/* プロブレムカード背景画像 */
.vv-problem__card-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 4px;
}

/* Whatセクション左画像 */
.vv-what__visual-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* スクリーンショットコラージュ */
.vv-ss img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: top left;
}

/* Benefit右画像 */
.vv-benefit__visual-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* ============================================================
   SP（〜768px）
   ============================================================ */
@media (max-width: 768px) {
    /* HERO */
    .vv-hero {
        height: auto;
        min-height: 600px;
    }

    .vv-hero__inner {
        flex-direction: column;
        gap: 40px;
        padding: 120px 16px 60px;
    }

    .vv-hero__left {
        width: 100%;
    }

    .vv-hero__visual {
        display: none;
    }

    .vv-hero__brand-name {
        transform: translate(-60%, -50%);
        font-size: 80px;
    }

    .vv-hero__video {
        object-fit: contain;
    }

    /* PROBLEM */
    .vv-problem {
        border-radius: 60px 60px 0 0;
        padding-bottom: 80px;
    }

    .vv-headline-64 {
        font-size: 26px;
    }

    .vv-problem__head {
        padding-top: 60px;
    }

    .vv-problem__headline-block {
        padding-left: 16px;
        padding-right: 16px;
        margin-top: 48px;
    }

    .vv-problem__cards {
        padding: 0 16px;
    }

    .vv-problem__row {
        flex-direction: column;
        gap: 48px;
    }

    .vv-problem__row--2 {
        padding-left: 0;
    }

    .vv-problem__card {
        width: 100%;
        height: auto;
        min-height: 160px;
    }

    .vv-problem__card-img {
        width: 80%;
        height: 140px;
    }

    .vv-problem__card-body {
        position: relative;
        top: auto;
        padding-left: 0;
        margin-top: 16px;
    }

    /* WHAT IS VIVASO */
    .vv-what {
        border-radius: 60px 60px 0 0;
    }

    .vv-what__head {
        padding-top: 60px;
    }

    .vv-what__headline-block {
        padding: 0 16px;
        margin-top: 48px;
    }

    .vv-what__step-head {
        gap: 16px;
        white-space: break-spaces;
        flex-direction: column;
    }

    .vv-what__features {
        padding: 0 16px;
        margin-top: 40px;
        gap: 40px;
    }

    .vv-what__feature-row {
        flex-direction: column;
        gap: 24px;
    }

    .vv-what__img {
        width: 100%;
        height: 220px;
    }

    .vv-what__steps {
        width: 100%;
    }

    .vv-what__feature-box {
        flex-direction: column;
        gap: 32px;
        padding: 32px 16px;
        align-items: center;
    }

    .vv-what__func-card {
        padding: 18px;
    }

    .vv-headline-64 br {
        display: none;
    }

    .vv-func-list {
        width: 100%;
    }

    /* FEATURES タブ */
    .vv-features {
        padding: 0 16px 80px;
        margin-top: 60px;
    }

    .vv-tabs {
        flex-direction: column;
        gap: 24px;
        padding: 24px 16px;
    }

    .vv-tab-nav {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 12px;
    }

    .vv-tab-btn {
        width: auto;
    }

    .vv-tab-content {
        width: 100%;
    }

    /* BENEFIT */
    .vv-benefit {
        border-radius: 60px 60px 0 0;
        padding-bottom: 80px;
    }

    .vv-benefit__item-head {
        flex-direction: column;
        gap: 16px;
        white-space: break-spaces;
    }

    .vv-benefit__head {
        padding-top: 60px;
    }

    .vv-benefit__inner {
        flex-direction: column;
        padding: 0 16px;
        margin-top: 48px;
        gap: 40px;
    }

    .vv-benefit__text {
        width: 100%;
    }

    .vv-benefit__img {
        width: 100%;
        height: 240px;
        margin-top: 0;
    }
}