/* Act for Nature Section */
.act-for-nature-section {
    position: relative; /* 背景や絶対配置要素の基準 */
    padding-bottom: 200px;
    overflow: hidden; /* はみ出す要素を考慮 */
    display: flex;
    flex-direction: column;
    align-items: center;
}

.act-for-nature-bg-elements {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    background-color: #9dd6ea;
    padding-top: 45px;
}

.act-wave-bg {
    background-image: url(../figma_images/pc/act_for_nature_section/act_wave_bg_pc.svg);
    background-size: 1440px 695px;
    background-repeat: repeat-x;
    background-position: center;
    top: 45px; /* Figma 17:2168 locationRelativeToParent.y */
    left: 0;
    width: 100%;
    height: 695px; /* Figma 17:2168 dimensions.height */
    object-fit: cover; /* 必要に応じて調整 */
}

.act-wace-bg-under-wave{
    flex-grow: 1;
    background-color: #52C197; /* Figma 17:2174 Rectangle 7 */
    height: auto;
    width: 100%;
}

.act-for-nature-content {
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    max-width: 858px; /* 珊瑚礁の写真の幅 17:10478 dimensions.width */
    margin: 0 40px;
    padding: 0; /* 左右パディングはmax-widthとmargin:autoで制御 */
    box-sizing: border-box;
}

.act-preserve-bubble-container {
    position: relative;
    /* Figma 17:8282 locationRelativeToParent: x:337, y:0 (親は9771:17) */
    /* .act-for-nature-content の左端はページ左右余白 (1440-858)/2 = 291px の位置 */
    /* 吹き出しの左端はセクション原点から337pxなので、コンテンツ左端からは 337-291 = 46px */
    margin-left: 46px; 
    width: 197.38px; /* Figma 17:8282 dimensions.width */
    height: 178.83px; /* Figma 17:8282 dimensions.height */
    z-index: 2;
    align-self: flex-start;
}

.act-preserve-bubble-img {
    width: 100%;
    height: 100%;
}

.act-preserve-text {
    position: absolute;
    top: 17.89%;
    left: 21.27%;
    font-family: "RiiCookieTest", cursive;
    font-weight: 400;
    font-size: 40px;
    color: #1B1464;
    text-align: center;
    line-height: 0.85em; 
    letter-spacing: -0.05em;
}

.act-title-en {
    font-family: "Sofija", cursive;
    font-weight: 400;
    font-size: 104px;
    color: #1B1464;
    letter-spacing: -5.2px;
    line-height: 0.7019em;
    letter-spacing: -0.05em;
    /* Figma 17:2172 y:179. 吹き出し(17:8282) y:0, height:179. ほぼ接する*/
    margin-bottom: 24px; /* 「自然を~」タイトル上までのマージン (276 - (179+73)) */
    text-align: center;
}

.act-title-jp-container {
    position: relative;
    display: flex; /* 中央揃えのため */
    justify-content: center;
    align-items: center;
    margin-bottom: 72px; /* 装飾下端から写真上端まで (399 - (226+151)) */
}

.act-title-decoration {
    position: absolute;
    /* Figma 17:10319 y:226, height:151. 17:2173 y:276, height:51 */
    /* テキストの中央あたりに装飾の中心が来るように */
    left: 50%;
    transform: translateX(-50%);
    width: 736px; /* Figma 17:10319 dimensions.width */
    height: 151px; /* Figma 17:10319 dimensions.height */
    z-index: -1;
}

.act-title-jp {
    font-family: "RiiCookieTest", cursive;
    font-weight: 400;
    font-size: 24px;
    color: #1B1464;
    letter-spacing: -1.2px;
    line-height: 2.125em; /* FigmaのlineHeightPx 51px は大きすぎるので調整 */
    text-align: center;
    position: relative; /* 装飾の上に表示 */
}

.act-coral-photo {
    width: 100%;
    max-width: 858px; /* Figma 17:10478 dimensions.width */
    height: auto;
    aspect-ratio: 858 / 463;
    border-radius: 40px;
    border: 2px solid #1B1464;
    margin-bottom: 56px; /* 写真下端から説明文上端まで (918 - (399+463)) */
    display: block;
    box-sizing: border-box;
}

.act-description {
    font-family: "Noto Sans JP", sans-serif;
    font-weight: 500;
    font-size: 16px;
    color: #1B1464;
    line-height: 28px;
    text-align: center;
    margin-bottom: 72px; /* 説明文下端からイラスト上端まで (1158 - (918+168)) */
    max-width: 704px; /* Figma 17:10479 dimensions.width */
}

.act-sealife-illust {
    display: block;
    max-width: 576px; /* Figma 17:17481 dimensions.width */
    height: auto;
    margin: 0 auto;
}

/* SP版スタイル */
@media (max-width: 900px) {
    .act-for-nature-section {
        padding: 103px 0 154px; /* 上下パディング調整 (仮) */
    }

    .act-for-nature-bg-elements{
        padding-top: 0px; 
    }

    .act-wave-bg {
        width: 100%; /* SPでは幅100% */
        height: 208px; /* Figma SP 27:14536 dimensions.height */
        background-image: url(../figma_images/sp/act_for_nature_section/act_wave_bg_sp.svg);
        background-size: 430px 208px; /* SP版SVGのサイズに合わせる */
        /* top: 0; は .act-for-nature-bg-elements で制御 */
    }
    
    .act-for-nature-content {
        max-width: 700px; /* 珊瑚礁の写真のSP版幅に合わせる */
        padding: 0 30px; /* 左右の余白 */
        margin: 0 auto;
        box-sizing: border-box;
        width: 100%;
    }

    .act-preserve-bubble-container {
        position: relative; 
        left: auto;
        top: auto;
        /* SP版Figma 27:16839 location y:103 (親9771:18から) */
        /* セクション上部からのマージンとして解釈 */
        margin: 0 auto 0px 0; /* 上マージンはセクションpaddingで調整、下マージン設定 */
        width: 197.38px; /* SP版Figma 27:16839 dimensions.width */
        height: auto;
        aspect-ratio: 197.38 / 178.83;
    }

    .act-preserve-text {
        font-size: 40px; /* SP版Figma 27:16573 fontSize (PCと同じ) */
        /* 他のスタイルはPC版を継承 */
    }

    .act-title-en {
        font-size: 104px; /* SP版Figma 27:16838 fontSize*/
        line-height: 0.84em; /* 2行表示のため調整 */
        margin-top: 0;
        margin-bottom: 24px; /* SP版調整 */
    }

    .act-title-jp-container {
        margin-bottom: 30px; /* SP版調整 */
        width: 100%;
        margin-bottom: 74px;
    }
    
    .act-title-decoration {
        /* SP版Figma 27:16836 dimensions.width (736px) は親の幅を超えるので調整 */
        width: 198.91%; 
        max-width: 736px; /* SPでの見た目に合わせて調整 */
        height: auto; /* SVGなので高さは自動 */
        bottom: -100%; /* SP版調整 */
    }

    .act-title-jp {
        font-size: 24px; /* SP版Figma 27:16837 fontSize (PCと同じ) */
    }

    .act-coral-photo {
        max-width: 700px; /* SP版Figma 27:14537 dimensions.width */
        margin-bottom: 50px; /* SP版調整 */
        aspect-ratio: 370 / 325;
    }

    .act-description {
        font-size: 16px; /* SP版Figma 27:16574 fontSize (PCと同じ) */
        line-height: 1.75; /* FigmaのlineHeightPx 28px / fontSize 16px */
        margin-bottom: 63px; /* SP版調整 */
        max-width: 700px; /* SP版Figma 27:16574 dimensions.width */
    }

    .act-sealife-illust {
        max-width: 370px; /* SP版Figma 27:16575 dimensions.width */
        width: 100%;
    }
}