/* CTA Section */
.cta-section {
    position: relative;
    background-color: #FFD925; /* Figma Rectangle 13 (17:17512) */
    padding-bottom: 0; 
    height: 37.54vw; /* Figma 9771:21 dimensions.height */
    max-height: 450.5px; /* Figma 9771:21 dimensions.height */
    overflow: visible;
}

.cta-bg {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 16.87vw; /* PC版波SVGの高さ */
    max-height: 202.5px; /* PC版波SVGの高さ */
    z-index: 0;
    background-image: url('../figma_images/pc/cta_section/cta_wave_bg_pc.svg');
    background-repeat: repeat-x;
    background-position: top center;
    background-size: auto 205.5px; /* 高さを維持し、幅はSVGのアスペクト比で自動調整しつつ繰り返す */
}
/* .cta-wave-bg img は削除したので、このセレクタは不要 */

.cta-content {
    position: relative;
    z-index: 1;
    /* PC版CTA(9771:21)の幅は1440px。主要コンテンツは中央に配置 */
    /* 左端要素: 吹き出し(17:19631) x:270. 右端要素: ボタンの親(17:17547) x:909, w:355 -> 1264 */
    /* コンテンツ幅: 1264 - 270 = 994px */
    max-width: 1200px; 
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 0; 
    box-sizing: border-box;
    height: 100%; 
}

.cta-lets-enjoy-bubble_wrap {
    position: absolute;
    /* 吹き出し(17:19631) x:270, y:0 (親9771:21から) */
    /* .cta-contentの左マージンは (1440-994)/2 = 223px */
    /* 吹き出しのleftは、.cta-contentの左端から 270 - 223 = 47px */
    left: 13.41%; 
    top: -3.99%; /* セクション上端から0px */
    width: 16.44%; /* Figma 17:19631 dimensions.width */
    height: auto;
    transform: rotate(-7.57deg);
}
.cta-lets-enjoy-bubble_wrap img{
    width: 100%;
    height: 100%;
}
.cta-lets-enjoy-bubble_wrap p{
    display: block;
    position: absolute;
    top: 14.71%;
    left: 18.62%;
    font-size: min(40px, 3.33vw);
    font-family: "RiiCookieTest", cursive;
    font-weight: 400;
    color: #1B1464;
    text-align: center;
    line-height: 1.005;
    letter-spacing: -0.05em;
}
.cta-lets-enjoy-bubble_small-letterspacing{
    letter-spacing: -0.95em;
}
.cta-catchphrase {
    /* キャッチコピーグループ(17:19587) y:58 (親9771:21から) */
    /* セクションpadding-topが29pxなので、そこからの相対位置は 58-29 = 29px */
    margin-top: 2.41%; 
    margin-left: 25.90%;
    /* ボタン(17:17547) y:326. キャッチコピーグループ(17:19587) y:58, h:302 -> end:360 */
    width: 72.53%;
}

.cta-reserve-button-link {
    display: inline-block;
    text-decoration: none;
    position: absolute; 
    top: 70.71%;
    right: 5.5%;
    width: 28.75%; /* Figma 17:19576 dimensions.width */
}

.cta-reserve-button-container {
    position: relative;
    width: 100%; /* Figma 17:19576 dimensions.width */
    height: 70px; /* Figma 17:19576 dimensions.height */
}

.cta-button-shadow {
    position: absolute;
    top: 10px; 
    left: 10px; 
    width: 100%;
    height: 100%;
    z-index: 0;
}

.cta-reserve-button {
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 100%;
    z-index: 1;
    box-sizing: border-box;
    background-color: #FFD925;
    color: #1B1464;
    font-size: 18px;
    font-family: "RiiCookieTest", cursive;
    font-weight: 400;
    text-align: center;
    line-height: 0.08em;
    border-radius: 9px;
    border: 3px solid #1B1464;
    transition: transform 0.3s ease-in-out;
}
.cta-reserve-button:hover{
    transform: translate(2px, 2px);
}

.cta-banana-char {
    position: absolute;
    left: 4.75%; /* Figma 17:17527 x (親9771:21から) */
    /* セクション高さ450.5, キャラ(17:17527) y:158, h:276.86 -> bottom: 450.5 - (158 + 276.86) = 15.64px */
    width: 12.89%; /* Figma 17:17527 dimensions.width */
    top: 30.71%; /* Figma 17:17527 y (親9771:21から) */
    height: auto;
    z-index: 2;
}

.cta-fish-char {
    position: absolute;
    /* Figma 17:17513 x:331.7 (親9771:21から). セクション幅1440. キャラ幅197.22 */
    /* right はページ右端からの距離: 1440 - (331.7 + 197.22) = 911.08px */
    left: 17.96%; 
    /* y:286 (親から). セクション高さ450.5, キャラ(17:17513) h:146.69. bottom: 450.5 - (286 + 146.69) = 17.81px */
    bottom: 5.21%; 
    width: 15.78%; /* Figma 17:17513 dimensions.width */
    height: auto;
    z-index: 2;
    transform: rotate(176.54deg);
}

/* SP版スタイル */
@media (max-width: 900px) {
    .cta-section {
        /* SP版(9771:24) y:10368. 背景Rect(27:16873) y:10450. padding-top: 10450-10368 = 82px */
        height: auto; /* SP版Figma 9771:24 dimensions.height */
        max-height: none    ;
    }

    .cta-bg {
        display: none;
    }
    
    .cta-content {
        height: 100%;
        padding: 0 0; 
        max-width: none; /* キャッチコピー画像グループ(27:21025)の幅 */
    }

    .cta-lets-enjoy-bubble_outer{
        position: relative;
        max-width: 430px;
        width: 100%;
    }

    .cta-lets-enjoy-bubble_wrap{
        position: static;
        width: 197.38px;
        height: 178.83px;
        margin-left: 9.51%;
        margin-top: -69.78px;
        margin-bottom: -22px;
    }

    .cta-lets-enjoy-bubble_wrap img{
        width: 100%;
        height: auto;
    }

    .cta-lets-enjoy-bubble_wrap p{
        font-size: 40px;
    }

    .cta-lets-enjoy-bubble {
        position: static; 
        /* 吹き出し(27:18978) y:0(親9771:24から). セクションpadding-top:82. なので、margin-topは不要 */
        margin: 0 auto; 
        /* 吹き出し下端(0+203=203)とキャッチコピーグループ(27:21025 y:169)は重なる */
        /* 吹き出しの下にキャッチコピーが来るように調整 */
        margin-bottom: -34px; /* 169 - 203 = -34px */
        width: 219.21px; 
    }

    .cta-catchphrase-group{
        display: block;
        margin: 0 6.04% 0 2.32%;
    }

    .cta-catchphrase {
        position: static;
        margin: 0 auto ;
        width: 100%;
        display: block;
        max-width: 394px;
    }

    .cta-character-container{
        display: flex;
        justify-content: center;
        align-items: flex-end;
        width: 100%;
        gap: 3.18px;
        max-width: 430px;
        margin: 0 auto;
        margin-bottom: 30px;
    }

    .cta-banana-char, .cta-fish-char{
        position: static;
    }

    .cta-banana-char{
        width: 122.93px;
        height: auto;
        transform: translateX(20.5px);
    }

    .cta-fish-char{
        width: 211.89px;
        margin-bottom: 6.18px;
        transform: rotate(176.54deg) translateX(-20.5px);
    }

    .cta-caractor-reserve-container{
        position: relative;
        width: 100%;
    }

    .cta-reserve-button-link {
        position: static;
        width: 345px;
        margin: 0 auto 54px;
        display: block;
    }

    .cta-reserve-button-container {
        width: 345px; /* SP版Figma 27:21026 dimensions.width (PCと同じ) */
        height: 70px; /* SP版Figma 27:21026 dimensions.height (PCと同じ) */
    }

    .cta-bg-wave_wrap{
        position: absolute;
        top: 14.25px;
        bottom: 0;
        left: 0;
        width: 100%;
        z-index: -1;
        display: flex;
        justify-content: flex-start;
        flex-direction: column;
        align-items: center;
    }

    .cta-bg-wave{
        width: 100%;
        height: 61px;
        background-image: url('../figma_images/sp/cta_section/cta_wave_bg_sp.svg');
        background-size: 430px 61px;
        background-repeat: repeat-x;
        background-position: top center;
    }

    .cta-bg-under-wave{
        width: 100%;
        height: auto;
        flex-grow: 1;
        background-color: #9DD6EA;
    }
    
    .cta-banana-char {
        /* バナナキャラ(27:18924) y:468(親9771:24から). セクション高さ843. キャラh:220. */
        /* bottom: 843 - (468 + 220) = 155px */
        left: 10px; /* Figmaの見た目から調整 */
        bottom: 155px; 
        width: 122.93px; 
        z-index: 1; 
    }

    .cta-fish-char {
        /* 魚キャラ(27:18910) y:569.7(親9771:24から). セクション高さ843. キャラh:116.57. */
        /* bottom: 843 - (569.7 + 116.57) = 156.73px */
        right: 10px; /* Figmaの見た目から調整 */
        bottom: 156.73px; 
        width: 156.71px; 
        z-index: 1;
    }
}