<html><head><meta name="color-scheme" content="light dark"></head><body><pre style="word-wrap: break-word; white-space: pre-wrap;">.page-headline{
    color: #3db134;
    font-size: 28px;
    letter-spacing: 2px;
    text-align: center;
    margin: 2rem auto 0.5rem auto;
    max-width: 1093px;
}
.page-headline-sub{
    color: #3db134;
    font-size: 16px;
    text-align: center;
    margin: 0 auto 1rem auto;
    max-width: 1093px;
    letter-spacing: 2px;
    font-family: "hiragino-kaku-gothic-pron", sans-serif;
    font-weight: 600;
}
@media (min-width: 769px) {
    .page-headline{
        font-size: 32px;
    }
}

.section{
    position: relative;
    display: grid;
    gap: 30px;
    width: 90%;
    max-width: 1093px;
    margin: 4rem auto 1rem auto;
    color: #000;
}
.section .title-wrapper &gt; .title{
    color: #3db134;
    font-size: 26px;
    font-weight: 600;
    text-align: center;
    letter-spacing: 2px;
    margin: 0 auto;
}
.section:not(.content1) .title-wrapper &gt; .title{
    font-size: 23px;
}
.section .title-wrapper &gt; .subtitle{
    color: #3db134;
    font-size: 16px;
    font-weight: 600;
    text-align: center;
    margin: 8px auto 0 auto;
    letter-spacing: 1px;
    font-family: "hiragino-kaku-gothic-pron", sans-serif;
}

.section .text{
    font-size: 18px;
    line-height: 1.6;
    letter-spacing: 0.5px;
}

@media (min-width: 769px){
    .section{
        gap: 40px;
        margin: 8rem auto 1rem auto;
    }
    .section .title-wrapper &gt; .title{
        font-size: 32px;
        letter-spacing: 4px;
    }
    .section .title-wrapper &gt; .subtitle{
        font-size: 18px;
        letter-spacing: 1.5px;
    }
    .section .text{
        letter-spacing: 3px;
        line-height: 1.7;
    }
}
@media (max-width: 416px){
    .section .title-wrapper{
        width: 110%;
        margin: 0 auto;
        left: -5%;
        position: relative;
    }
}
@media (max-width: 395px){
    .section.content1 .title-wrapper &gt; .title{
        font-size: 25px;
    }
    .section.content4 .title-wrapper &gt; .title{
        font-size: 20px;
    }
}

/* content section -- */
.section.content1 .image-wrapper{
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
}
.section.content1 .image-wrapper &gt; img{
    width: 220px;
    left: 12px;
    position: relative;
}

.section.content2 .image-wrapper{
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
}
.section.content2 .image-wrapper &gt; img{
    width: 170px;
    top: -10px;
    left: 12px;
    position: relative;
}

.section.content3 .image-wrapper{
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
}
.section.content3 .image-wrapper &gt; img{
    width: 175px;
    left: 3px;
    position: relative;
}

.section.content4 .image-wrapper{
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
}
.section.content4 .image-wrapper &gt; img{

}

@media (min-width: 769px){
    .section:not(.content1) .title-wrapper &gt; .title {
        font-size: 30px;
    }
    
    .section.content:has(.title-wrapper):has(.image-wrapper):has(.text-wrapper){
        display: grid;
        grid-template-areas: 
            "title image"
            "text image";
        grid-template-columns: 1fr max-content;
    }
    .section.content:has(.title-wrapper):has(.image-wrapper):has(.text-wrapper) .title-wrapper{ grid-area: title; }
    .section.content:has(.title-wrapper):has(.image-wrapper):has(.text-wrapper) .image-wrapper{ grid-area: image; width :340px; height: 0;}
    .section.content:has(.title-wrapper):has(.image-wrapper):has(.text-wrapper) .text-wrapper{ grid-area: text; }
    .section.content:has(.title-wrapper):has(.image-wrapper):has(.text-wrapper) .title-wrapper &gt; .title{ text-align: left; }

    .section.content1 .image-wrapper &gt; img{
        width: 320px;
        left: 0;
        top: 140px;
    }
    .section.content2 .image-wrapper &gt; img{
        width: 250px;
        left: 0;
        top: 140px;
    }
    .section.content3 .image-wrapper &gt; img{
        width: 270px;
        left: 0;
        top: 150px;
    }
}
/* -- content section */

/* volunteer section -- */
.volunteer-section .contents-wrapper{
    display: grid;
    grid-template-columns: 1fr max-content;
    gap: 40px;
}
.volunteer-section .contents-wrapper &gt; .image-wrapper{
    display: flex;
    justify-content: center;
    align-items: center;
    width: 250px;
}
.volunteer-section .more-btn-wrapper{
    margin-top: -3vw;
}
.volunteer-section .more-btn-wrapper .more-btn{
    letter-spacing: 1px;
}
/* -- volunteer section */

/* page-link section -- */
.page-link-section{
    display: grid;
    gap: 0;
    grid-template-areas: 
        "grid1"
        "grid2"
        "grid3"
        "grid4"
        "grid5"
        ;
    grid-template-columns: 1fr;
}
.page-link-wrapper{
    position: relative;
    width: 100%;
}
.page-link-wrapper img{
    position: relative;
    width: 100%;
}

.grid1{
    grid-area: grid1;
}
.grid2{
    grid-area: grid2;
}
.grid3{
    grid-area: grid3;
}
.grid4{
    grid-area: grid4;
}
.grid5{
    grid-area: grid5;
}

@media (min-width: 769px) {
    .page-link-section{
        grid-template-columns: repeat(6, 1fr);
        grid-template-areas: 
            "grid1 grid1 grid1 grid2 grid2 grid2"
            "grid3 grid3 grid4 grid4 grid5 grid5"
            ;
    }
}
/* -- page-link section */

.footer{
    margin-top: 4rem;
}
@media (min-width: 769px) {
    .footer{
        margin-top: 10rem;
    }
}</pre></body></html>