/* Marine Activities Section */
.marine-activities-section {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    overflow: hidden; /* はみ出すキャラクターなどを考慮 */
    padding : 156px 30px 0px;
}

.marine-activities-background-layer {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: -1;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
}

.marine-activities-wave-bg {
    width: 100%;
    height: 695px;
    background-image: url(../figma_images/pc/marine_activities_section/marine_activities_wave_bg_pc.svg);
    background-size: 1440px 695px;
    background-position: center;
    background-repeat: repeat-x;
}

.marine-activities-under-wave-bg {
    width: 100%;
    flex-grow: 1;
    background-color: #9dd6ea; /* Figma 17:2080 blue_background */
}

.marine-activities-title-area {
    text-align: center;
    margin-bottom: 60px;
}

.marine-activities-title-en {
    font-family: "RiiCookieTest", cursive;
    font-weight: 400;
    font-size: 56px;
    color: #1b1464;
    letter-spacing: -2.8px;
    line-height: 51px;
}

.marine-activities-title-jp {
    font-family: "RiiCookieTest", cursive;
    font-weight: 400;
    font-size: 18px;
    color: #1b1464;
    line-height: 51px;
    margin-top: 8px;
}

.activity-item {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    width: 100%;
    max-width: 1089px; /* Figmaの banana_boat_row の幅 */
    margin: 0 0 133px;
    position: relative; /* キャラクターなどの絶対配置の基準 */
    gap: 20px;
}

.activity-item.snorkel .activity-item-left {
    order: 2; /* シュノーケルでは左コンテンツを右に */
}
.activity-item.snorkel .activity-item-right {
    order: 1; /* シュノーケルでは右コンテンツを左に */
    align-items: flex-start;
    padding-top: 33px;
}

.activity-item-left,
.activity-item-right {
    box-sizing: border-box;
}

.activity-item .activity-item-left {
    flex-basis: 40.22%; /* 左右コンテンツの幅を均等に近づける */
    width   : 40.22%; /* 左右コンテンツの幅を均等に近づける */
    min-width: 409px;
}

.activity-item .activity-item-right {
    flex-basis: auto;
    width: min( 51.42%, 100% - 20px - 409px);
    padding-top: 12px;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
}

/* 右側コンテンツ (バナナボートの写真側、シュノーケルの説明側) */
.activity-item-right {
    position: relative; /* キャラクター配置の基準 */
}

.activity-bubble-container {
    position: relative; /* 吹き出し内のテキスト配置のため */
    margin-bottom: 11.17px;
    width: 197.38px;
}
.activity-bubble-container.snorkel-bubble {
    /* シュノーケルのバナナ吹き出し用 */
    margin-left: auto; /* 右寄せにする場合 */
    margin-right: 50px; /* 仮調整 */
}

.activity-bubble-img {
    display: block;
    max-width: 100%;
}

.activity-bubble-text-content {
    position: absolute;
    top: 55px;
    left: 54px;
    text-align: center;
    color: #1b1464;
}

.activity-bubble-label {
    /* Ride / Feel */
    font-family: "RiiCookieTest", cursive;
    font-weight: 400;
    font-size: 40px;
    letter-spacing: -2px;
    line-height: 34px;
}

.marine-activitites-title-area {
    padding-bottom: 39px;
    position: relative;
    z-index: 10;
    margin-bottom: 25px;
}

.activity-item.snorkel .marine-activitites-title-area {
    padding-bottom: 58px;
    margin-bottom: 6px;
}

.activity-item.snorkel .activity-decoration {
    left: auto;
    right: 4px;
    width: 149.52%;
}

.activity-name-en {
    font-family: "Sofija", cursive;
    font-weight: 400;
    font-size: min(104px, 9.00vw);
    color: #1b1464;
    letter-spacing: -5.2px;
    line-height: 73px;
    margin-bottom: 24px;
}

.activity-name-jp {
    font-family: "RiiCookieTest", cursive;
    font-weight: 400;
    font-size: 24px;
    color: #1b1464;
    letter-spacing: -1.2px;
    line-height: 51px;
}

.activity-decoration {
    position: absolute;
    bottom: 0;
    left: 0;
    display: block;
    width: 143.37%;
    z-index: -1;
}

.activity-description {
    font-family: "Noto Sans JP", sans-serif;
    font-weight: 500;
    font-size: 16px;
    color: #1b1464;
    line-height: 28px;
    margin-bottom: 58px;
}

.activity-price-info {
    display: flex;
    align-items: center;
    margin-bottom: 33px;
    gap: 24px;
    margin-left: 3px;
}

.activity-duration {
    background-color: #ffffff;
    border-radius: 50%;
    width: 110px;
    height: 110px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-between;
    text-align: center;
    color: #1b1464;
    padding: 5.5px 0 1.5px;
    box-sizing: border-box;
}

.activity-duration-label {
    font-family: "RiiCookieTest", cursive;
    font-weight: 300;
    font-size: 16px;
    line-height: 34px;
    letter-spacing: -0.05em;
}

.activity-duration-value {
    font-family: "RiiCookieTest", cursive;
    font-weight: 300;
    font-size: 56px;
    line-height: 34px;
    letter-spacing: -0.05em;
}
.activity-duration-unit {
    font-family: "RiiCookieTest", cursive;
    font-weight: 300;
    font-size: 16px;
    line-height: 34px;
    margin-left: 2px;
    letter-spacing: -0.05em;
}

.activity-price {
    color: #1b1464;
}

.activity-price-label {
    font-family: "RiiCookieTest", cursive;
    font-weight: 300;
    font-size: 24px;
    line-height: 51px;
}

.activity-price-value {
    font-family: "RiiCookieTest", cursive;
    font-weight: 300;
    font-size: 48px;
    line-height: 51px;
    letter-spacing: -0.05em;
}
.activity-price-value .activity-price-value-small-text {
    font-size: 32px;
}
.activity-price-value .activity-price-value-big-letterspacing {
    letter-spacing: 0.07em;
}

.activity-notes {
    font-family: "Noto Sans JP", sans-serif;
    font-weight: 500;
    font-size: 12px;
    color: #1b1464;
    line-height: 1.75;
    margin-bottom: 56px;
}

.activity-reserve-button-container {
    position: relative;
    width: fit-content;
    margin-left: 31px;
}

.activity-reserve-button {
    display: block;
    background-color: #ffd925;
    color: #1b1464;
    font-family: "RiiCookieTest", cursive;
    font-weight: 400;
    font-size: 18px;
    line-height: 51px;
    text-decoration: none;
    padding: 6.5px 60px;
    border-radius: 9px;
    border: 3px solid #1b1464;
    transition: all 0.2s ease;
    width: 345px;
    text-align: center;
    position: relative;
    transform: translate(0px, 0px);
    z-index: 1;
}
.activity-reserve-button-container:hover .activity-reserve-button {
    transform: translate(2px, 2px);
}
.activity-reserve-button-bg {
    position: absolute;
    top: 10px;
    left: 10px;
    width: 100%;
    height: 100%;
    z-index: -1;
}

.activity-main-photo {
    width: 100%;
    max-width: 560px;
    height: auto;
    border-radius: 40px;
    border: 2px solid #1b1464;
    display: block;
    margin-bottom: 24px;
    position: relative;
    box-sizing: border-box;
    aspect-ratio: 560 / 463;
    object-fit: cover;
}

.activity-sub-photos {
    display: flex;
    justify-content: space-between;
    gap: 25px; /* 仮 */
    max-width: 560px; /* メイン写真の幅に合わせる */
    width: 100%;
}

.activity-sub-photo {
    width: 198px; /* gapを考慮 */
    height: auto;
    aspect-ratio: 175 / 165; /* Figmaの小写真の比率に近い値 (仮) */
    object-fit: cover;
    border-radius: 20px; /* 仮 */
    border: 2px solid #1b1464;
    box-sizing: border-box;
    aspect-ratio: 198 / 164;
    margin: 0 12.5px;
}

.activity-character {
    z-index: 10;
}
.banana-char {
    /* バナナボートの右側 */
    width: 91.39%; /* Figmaから */
    height: auto;
    margin-bottom: -19.64%;
    z-index: -1;
}
.fish-char {
    /* シュノーケルの左側 */
    width: 262px; /* Figmaから */
    height: auto;
    margin-left: 26px;
    margin-bottom: -14.3px;
}

/* SP版スタイル */
@media (max-width: 900px) {
    /* Marine Activities Section - SP specific styles */
    .marine-activities-section {
        padding: 103px 30px 140px; /* SP版の上下左右パディング */
        background-size: cover; /* SPでは波背景を調整 */
    }

    .marine-activities-wave-bg{
        background-image: url(../figma_images/sp/marine_activities_section/marine_activities_wave_bg_sp.svg);
        background-size: 430px 208px ;
        height: 208px;
    }

    .marine-activities-title-area {
        margin-bottom: 40px; /* SP版マージン */
    }

    .activity-item {
        flex-direction: column; /* SPでは縦積み */
        align-items: center; /* 中央揃え */
        margin-bottom: 60px;
        gap: 30px; /* 各要素間のマージン */
        width: 100%;
        max-width: 700px;
    }

    .activity-item-left-top{
        width: 100%;
        max-width: 431px;
        margin: 0 auto;
    }

    .marine-activitites-title-area,
    .activity-item.snorkel .marine-activitites-title-area{
        padding-bottom: 19px;
        width: 100%;
        margin-bottom: 0;
    }
    .activity-item.snorkel .marine-activitites-title-area{
        padding-bottom: 9px;
    }

    .activity-item.snorkel .activity-item-left,
    .activity-item.snorkel .activity-item-right {
        order: initial; /* SPではHTMLの記述順に戻す */
    }

    .activity-item .activity-item-left,
    .activity-item .activity-item-right {
        flex-basis: auto;
        width: 100%;
        display: flex;
        flex-direction: column;
        align-items: flex-start; /* 基本は中央揃え */
        text-align: left; /* テキストも中央揃え */
        min-width: 0;
        position: relative;
    }

    .activity-item .activity-item-right{
        padding-top: 3px;
        margin-bottom: 51.34px;
        max-width: 430px;
        margin-right: auto;
        margin-left: auto;
    }
    
    .activity-item.snorkel .activity-item-right{
        padding-top: 14px;
    }

    .activity-item-left p,
    .activity-item-right p,
    .activity-item-left .activity-notes,
    .activity-item-right .activity-notes {
        text-align: left; /* 説明文や注意書きは左揃えに戻す */
    }

    .activity-price-value .activity-price-value-small-text.activity-price-value-small-text.activity-price-value{
        font-size: min(48px, 12.00vw);
    }

    .activity-price-value .activity-price-value-small-text.activity-price-value-small-text{
        font-size: min(32px, 8.00vw);
    }

    .activity-bubble-container {
        margin: 0 auto 11.7px 0; /* 中央揃え */
    }
    .activity-bubble-container.snorkel-bubble {
        margin-left: auto;
        margin-right: auto;
    }

    .activity-name-en {
        font-size: 104px; /* SPフォントサイズ調整 */
        line-height: 88px;
    }

    .activity-name-jp {
        font-size: 20px; /* SPフォントサイズ調整 */
        margin-bottom: 0;
    }

    .activity-decoration,
    .activity-item.snorkel .activity-decoration {
        margin-bottom: 0;
        width: 169.72%;
        right: unset;
        left: 0;
        bottom: 0;
    }

    .activity-description {
        font-size: 15px;
        line-height: 28px;
        margin-bottom: 52px;
        padding: 0; /* 左右に少し余白 */
    }

    .activity-price-info {
        gap: min(16px, 4.00vw);
        align-items: center;
        margin-bottom: 25px;
        margin-left: 0;
        position: relative;
        left: 50%;
        transform: translateX(-50%);
    }

    .activity-duration,
    .activity-price {
        text-align: center;
    }

    .activity-duration-unit{
        margin-left: 0;
    }

    .activity-duration-label,
    .activity-duration-value{
        margin-bottom: -8px;
    }

    .activity-duration{
        width: 92px;
        height: 92px;
        padding-top: 6.5px;
    }

    .activity-duration-value{
        font-size: 40px;
    }

    .activity-notes {
        margin-bottom: 52px;
        padding: 0;
    }

    .activity-reserve-button-container{
        margin: 0 auto;
        max-width: 100%;
    }

    .activity-reserve-button {
        margin: 0 auto;
        max-width: 100%;
    }

    .activity-main-photo {
        max-width: 100%; /* SPでは幅いっぱいに */
        margin-bottom: 19px;
    }

    .activity-sub-photos {
        width: calc(100% + 60px);
        height: 125.81px;
        margin: 0 -30px;
        max-width: none;
    }

    .activity-sub-photos .slick-list{
        overflow: visible;
    }

    .activity-sub-photo {
        aspect-ratio: 152.17 / 125.81; /* PC版の比率を維持 */
        width: 152.17px;
        height: auto;
        margin: 0 9.5px;
        box-sizing: content-box;
    }

    .activity-character {
        position: relative; /* SPでは絶対配置を解除して流れに沿わせる */
        margin-top: 20px;
    }
    .banana-char {
        width: 91.23%;
        right: auto;
        top: auto; /* 絶対配置解除 */
        margin: 0px auto -19.62% 8.37%;
    }
    .fish-char {
        width: 173px;
        left: auto;
        bottom: auto; /* 絶対配置解除 */
        margin: 0 auto -10px 17.18px ;
    }
}

@media (max-width: 400px) {
    .activity-price-info{
        gap: 2vw;
        flex-direction: column;
    }
}