/* What's Marine Jewel Section */
.whats-section {
    max-width: 1106px; /* Figmaのセクション幅 (1106.16) */
    margin: 96px auto 149px; /* 上下マージンを100pxに設定 */
    padding: 0 50px;
    box-sizing: content-box;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.whats-title-area {
    text-align: center;
    margin-bottom: 80px; /* タイトル下から左コンテンツ上まで */
}

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

.whats-title-en-small-letter-space{
    letter-spacing: -53.2px;
}

.whats-title-jp {
    font-family: "RiiCookieTest", cursive;
    font-weight: 400;
    font-size: 18px;
    color: #1B1464;
    line-height: 51px; 
    margin-top: 8px; /* 「What's」の下からの間隔 */
}

.whats-content-area {
    display: flex;
    justify-content: space-between;
    align-items: flex-start; /* 上揃え */
    width: 100%;
    gap: 93px; /* 左コンテンツと右コンテンツの間のスペース */
    margin-bottom: 96px; /* コンテンツエリア下から写真エリア上まで */
}

.whats-content-left {
    flex-basis: 52%; /* Figmaの左側コンテンツ幅 (579px) / 全体幅 (1106px) */
    /* padding-right: 0; */ /* gapを使用するため削除 */
    box-sizing: border-box;
}

.whats-content-heading {
    font-family: "RiiCookieTest", cursive;
    font-weight: 400;
    font-size: 32px;
    color: #1B1464;
    line-height: 39px;
    margin-bottom: 48px; /* 見出し下から説明文上まで */
    word-break: keep-all;
    overflow-wrap: anywhere;
}

.whats-content-text p {
    font-family: "Noto Sans JP", sans-serif;
    font-weight: 500;
    font-size: 16px;
    color: #1B1464;
    line-height: 28px;
    margin-bottom: 28px; /* 段落間マージン */
}
.whats-content-text p:last-child {
    margin-bottom: 0;
}

.whats-content-right {
    flex-basis: 39.24%; /* Figmaの右側地図幅 (約434px) / 全体幅 (1106px) から調整 */
    display: flex;
    justify-content: center; /* 地図画像を中央に */
    align-items: center;
}

.whats-map-image {
    max-width: 100%;
    height: auto;
    margin-top: 8.06%;
}

.whats-photos-area {
    display: flex;
    justify-content: space-between;
    width: 100%;
    gap: 40px; /* 写真間の隙間 */
}

.whats-photo {
    width: calc((100% - 40px * 2) / 3); /* 3枚均等配置、gapを考慮 */
    height: auto;
    border-radius: 40px;
    border: 2px solid #1B1464;
    box-sizing: border-box;
    object-fit: cover; /* アスペクト比を保ちつつコンテナを埋める */
    aspect-ratio: 336 / 238; /* Figmaの画像サイズから */
}

@media (max-width: 900px) {
    /* What's Marine Jewel Section - SP specific styles */
    .whats-section { /* SP版では上下マージンを調整 */
        margin: 40px auto; /* SP版の上下マージン */
        padding: 0 30px; /* SP版左右パディング */
    }

    .whats-title-area {
        margin-bottom: 30px; /* SP版マージン */
    }

    .whats-title-en {
        font-size: 40px; /* SP版フォントサイズ */
        line-height: 1.1;
    }

    .whats-title-jp {
        font-size: 16px; /* SP版フォントサイズ */
        line-height: 1.5;
        margin-top: -5px; /* SP版調整 */
    }

    .whats-content-area {
        flex-direction: column; /* SP版では縦積み */
        gap: 30px; /* SP版の要素間マージン */
        margin-bottom: 40px; /* SP版マージン */
        max-width: 700px;
    }

    .whats-content-left {
        flex-basis: auto; /* SP版では幅100% */
        width: 100%;
        padding-right: 0;
        /* margin-bottom は .whats-content-area の gap で代替 */
    }

    .whats-content-heading {
        font-size: 20px; /* SP版フォントサイズ */
        line-height: 1.3;
        margin-bottom: 20px; /* SP版マージン */
        text-align: center;
    }

    .whats-content-text p {
        font-size: 15px; /* SP版フォントサイズ */
        line-height: 1.8;
        margin-bottom: 20px; /* SP版段落間マージン */
    }

    .whats-content-right {
        flex-basis: auto; /* SP版では幅100% */
        width: 100%;
        max-width: 400px;
        margin: 0 auto;
    }

    .whats-map-image {
        /* SP版ではSP用の地図画像 (whats_map_sp.png) を表示することを想定 */
        /* HTML側でimgのsrcを切り替えるか、背景画像で対応。今回はPC版画像を縮小表示 */
        max-width: 100%; 
    }

    .whats-photos-area {
        flex-direction: column; /* SP版では縦積み */
        align-items: center;
        gap: 15px; /* SP版写真間の隙間 */
    }

    .whats-photo {
        width: 80%; /* SP版では写真の幅を調整 */
        max-width: 336px; /* PC版の個別写真幅を最大とする */
    }
}