/* Main Visual Section - New Structure */
.main-visual-section {
    position: relative;
    width: 100%;
    height: min(65.694vw, 946px);
}

.mv-background-layers {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 1;
}

.mv-yellow-bg {
    width: 100%;
    height: 100%; /* PC版Figmaの黄色い背景の高さ */
    background-color: #ffd925;
}

.mv-image-wrapper {
    /* 角丸背景画像コンテナ */
    position: absolute;
    top: clamp(90px, 9.02vw,130px);
    left: 50%;
    transform: translateX(-50%);
    width: calc(100% - 128px); /* 左右マージン64px想定 */
    max-width: 1312px; /* Figmaの画像コンテナ幅 */
    height: auto;
    aspect-ratio: 1312 / 724;
    border-radius: 60px;
    overflow: hidden;
}

.mv-bg-image {
    display: block;
    width: 102%;
    height: 184.9%;
    object-fit: cover;
    position: absolute;
    top: max(-25.76vw, -371px);
    left: 50%;
    transform: translateX(-50%);
}

.mv-content-area {
    position: relative;
    z-index: 2; /* 背景より手前 */
    width: 100%;
    max-width: 1440px;
    min-height: 100%; /* 親セクションの高さに合わせる */
    margin: 0 auto;
    padding: 0 64px; /* PC版の左右の余白 */
    box-sizing: border-box;
    display: grid; /* Gridレイアウトを試す */
    /* グリッドの定義は要素配置を見ながら調整 */
    /* 仮: grid-template-columns: repeat(12, 1fr); */
    /* 仮: grid-template-rows: auto auto auto 1fr; */
    /* align-items: start; */
}

.mv-logo-area {
    /* grid-column: スパンなど / grid-row: スパンなど */
    /* display: flex; justify-content: center; */
    position: absolute; /* Gridに慣れるまで一時的に絶対配置でFigma位置を再現 */
    top: 36px;
    left: 50%;
    transform: translateX(-50%); /* ロゴを中央に配置 */
    width: 16.67vw; /* 240px / 1440px */
    max-width: 240px;
    z-index: 5; /* 他のコンテンツより手前 */
}
.mv-logo-area img {
    width: 100%;
    height: auto;
}

.mv-catchphrases {
    /* このコンテナは preserve-texts と main-catchphrase をグルーピングする役割 */
    /* 位置とサイズは子要素によって決まるか、Figmaの視覚的グループに合わせる */
    /* ここでは一旦、子要素の配置の基準とするため relative を検討したが、子は absolute なので不要 */
    z-index: 4;
}

.mv-preserve-texts {
    /* Figma: Group 15 (17:2141) */
    position: absolute;
    top: clamp(68px, 5.76vw, 83px);
    left: 10.14%; /* 146px / 1440px */
    width: 27.57vw; /* 397px / 1440px */
    max-width: 397px;
}
.mv-preserve-texts img {
    width: 100%;
    height: auto;
}

.mv-main-catchphrase {
    /* Figma: Group 5 (14:22) の主要部分 */
    position: absolute;
    top: min(272px, 18.89vw); /* Figma 14:22 boundingBox.y */
    left: 26.89%; /* 387.26px / 1440px */
    width: 46.41vw; /* 668.29px / 1440px */
    max-width: 668.29px;
}
.mv-main-catchphrase img {
    width: 100%;
    height: auto;
}

.mv-journey-text {
    position: absolute;
    bottom: min(25px, 1.73vw);
    left: 50%;
    transform: translateX(-50%);
    max-width: 385px;
    font-family: "RiiCookieTest", cursive;
    font-weight: 400;
    font-size: 18px;
    color: #1b1464;
    text-align: center;
    line-height: 2.83;
    z-index: 4;
}

.mv-characters-area {
    position: absolute;
    width: 100%;
    max-width: 1440px;
    left: 50%;
    transform: translateX(-50%);
    bottom: max(-5.12vw, -73.86px);
    height: auto; /* 高さは内容によって決まる */
    z-index: 4;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0 64px; /* PCの左右余白 */
    box-sizing: border-box;
}

.mv-character-unit {
    position: relative; /* 吹き出しの基準 */
}

.mv-character-unit.fish-unit {
    top: max(-19px, -1.31vw);
}

.mv-character-image-banana img,
.mv-character-image-fish img {
    display: block;
    width: 100%;
    height: auto;
    /* サイズは各ユニットで指定 */
}

.mv-character-image-banana {
    width: 10.76vw; /* 155px / 1440px */
    max-width: 155px; /* Figma: 154.7px */
    height: auto;
    aspect-ratio: 154.7 / 276.86;
}
.mv-character-image-fish {
    width: 13.26vw; /* 191px / 1440px */
    max-width: 191px; /* Figma: 190.66px */
    height: auto;
    aspect-ratio: 190.66 / 137.3;
}

.mv-bubble {
    position: absolute;
    text-align: center;
    z-index: 5; /* キャラクターより手前 */
    display: flex; /* 内部要素の配置のため */
    flex-direction: column;
    align-items: center;
    justify-content: center;
}
.mv-bubble:hover{
    opacity: 0.8;
}
.mv-bubble-bg {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: -1;
}
.mv-bubble-content {
    /* このクラスはHTMLから削除したので、.mv-bubble に直接スタイルを適用 */
    width: 100%;
    height: 100%;
    padding: 0 3.7% 14.9% 0;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.banana-unit .mv-bubble {
    /* Figma Group 7 (14:4105) */
    width: 20.49vw;
    max-width: 295px;
    height: auto;
    aspect-ratio: 294.98 / 270;
    bottom: 100%;
    left: 0;
    transform: translate(12.5%, 21.85%);
}

.fish-unit .mv-bubble {
    /* Figma Group 8 (14:4106) */
    width: 20.69vw;
    max-width: 298px;
    height: auto;
    aspect-ratio: 298.01 / 270;
    bottom: calc(100% - min(7px, 0.48vw));
    right: 0;
    transform: translate(-9.6%, 0%);
}

.mv-bubble-text-large {
    font-family: "Sofija", cursive;
    font-weight: 400;
    font-size: clamp(10px, 3.8vw, 56px);
    color: #1b1464;
    letter-spacing: max(-2.8px, -0.19vw);
    line-height: 0.91;
    margin-bottom: min(2px, 0.138vw);
}

.mv-bubble-text-small {
    font-family: "Noto Sans JP", sans-serif;
    font-weight: 600;
    font-size: clamp(10px, 1.25vw, 18px);
    color: #1b1464;
    line-height: 1.5;
    margin-bottom: min(8px, 0.55vw);
}

.mv-bubble-arrow {
    width: 1.46vw; /* 21px / 1440px */
    max-width: 21px;
    height: auto;
}

@media (max-width: 900px) {
    /* SP Main Visual Styles */
    .main-visual-section {
        width: 100%;
        height: auto;
        padding-top: 40px;
        display: flex;
        flex-direction: column;
        align-items: center;
    }

    .main-visual-bg-color {
        width: 100%; /* SPでは画面幅に合わせる */
        height: 1075px; /* (27:8 boundingBox.height) */
    }

    .mv-image-wrapper {
        height: clamp(560px,134.88vw, 580px);
        top: calc(40px + min(30px, 6.97vw));
        width: clamp(335px, 86.04vw, 800px);
        min-height: 560px;
    }

    .mv-bg-image{
        width: 212.93%;
        height: 135.83%;
        top: -4.65%;
        left: -56.33%;
        transform: none;
    }

    .mv-content-area{
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: flex-start;
        padding: 0;
        margin: 0 40px;
        width: auto;
        height: calc( 30px + clamp(560px,134.88vw, 580px));
        min-height: 0px;
    }

    .mv-logo-area{
        position: relative;
        top: 0;
        left: 0;
        transform: none;
        width: 129.57px;
        max-width: 100%;
        margin-bottom: 10px;
    }

    .mv-catchphrases{
        display: flex;
        flex-direction: column;
        align-items: center;
    }

    .mv-preserve-texts{
        position: relative;
        top: 0;
        left: max(-1.35px, -0.313vw);
        transform: none;
        max-width: 100%;
        width: 187.16px;
    }

    .mv-main-catchphrase{
        position: relative;
        top: 0;
        left: max(2.5px, 0.73vw);
        transform: none;
        max-width: 100%;
        width: 345.17px;
    }

    .mv-journey-text{
        position: relative;
        font-size: 14px;
        bottom: 0;
        left: 0;
        transform: none;
        line-height: 3.64;
    }

    .mv-characters-area{
        position: relative;
        left: 0;
        bottom: 0;
        transform: none;
        padding: 5px 10.14px 0 17.26px;
        display: flex;
        justify-content: space-between;
        align-items: flex-start;
        flex-direction: row;
        flex-wrap: nowrap;
        max-width: 403px;
    }

    .mv-character-unit.banana-unit{
        width: 49.38%;

    }

    .mv-character-image-banana{
        width: 59.35%;
        margin-left: 12.94%;
        position: relative;
        top: -17.49%;
        margin-top: -7.54%;
        margin-bottom: -24.75%;
    }

    .banana-unit .mv-bubble {
        /* Group 7 (27:81) */
        height: auto;
        aspect-ratio: 199 / 182;
        width: 100%;
        position: relative;
        top: 0;
        left: 0;
        transform: none;
        max-width: 100%;
    }

    .mv-bubble-text-large{
        font-size: 33px;
        line-height: 0.8;
        margin-bottom: 0;
    }

    .mv-bubble-text-small{
        font-size: 16px;
        margin-bottom: 3.03%;
    }

    .mv-bubble-arrow{
        width: min(21px, 4.88vw);
    }

    .mv-character-unit.fish-unit{
        top: 0;
        left: 0;
        transform: none;
        width: 47.15%;
        position: relative;
        display: flex;
        flex-direction: column;
        align-items: flex-end;
    }
    
    .fish-unit .mv-bubble{
        width: 100%;
        position: relative;
        top: 0;
        left: 0;
        transform: none;
        max-width: 100%;
        margin-top: 4.21%;
    }
    
    .mv-character-image-fish{
        width: 76.10%;
        margin-right: 8.63%;
        margin-top: 6.32%;
    }
}