@charset "UTF-8";

main {
    margin-top: 0;
}

header {
    top: -36px;
    transition: top 0.3s ease-out;
    &.scrolled {
        top: 0;
    }
}

.headMsg {
    background-image: url(/img/index/top_image.webp);
    background-position: top center;
    background-size: contain;
    background-repeat: no-repeat;
    aspect-ratio: 4 / 3;
    width: fit-content;
    max-height: 100vh;
    height: 100vh;

    .inner {
        display: flex;
        flex-direction: column;
        align-items: center;
        height: 100%;
        justify-content: space-between;
        container-type: inline-size;
        padding: 0;
        position: relative;
        z-index: 10;
        h1 {
            padding: 0 16px;
            display: flex;
            align-items: center;
            a {
                color: yellow;
                font-size: 80px;
            }
            .menu-icon {
                position: fixed;
                top: 16px;
                right: 16px;
                display: none;
                font-size: 64px;
                line-height: 1;
                margin: 0;
                cursor: pointer;
                color: #156082;
                background-color: #e1e1e1;
                border: 4px solid #aac093;
                border-radius: 50%;
                z-index: 1000;
            }
        }
        p {
            color: white;
            position: absolute;
            top: 60%;
            width: 100%;
            text-align: center;
            font-size: clamp(16px, 10.5cqw, 80px);
            font-weight: 900;
            margin: 0;
            span {
                display: block;
            }
        }
        .navUL {
            padding: 0 16px;
            position: absolute;
            top: 27%;
            display: flex;
            justify-content: space-between;
            width: 100%;
            max-width: 864px;
            font-size: 32px;
            font-weight: 900;
            z-index: 100;
            a {
                color: white;
            }
        }
    }
}

.column {
    .base_width {
        display: flex;
        flex-direction: column;
        align-items: center;
    }
    ul.postList {
        width: 100%;
    }
}

/* content_section instagram */
.index_instagram {
    display: flex;
    flex-direction: column;
    align-items: center;
    p {
        a {
            display: flex;
            align-items: center;
            font-size: 24px;
            background: linear-gradient(90deg, #4158D0, #C850C0 30%, #FFCC70);
            background: -webkit-linear-gradient(0deg, #4158D0, #C850C0 30%, #FFCC70);
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
            transition: .3s;
            font-weight: bold;
            &:hover {
                background: transparent;
                color: #42a5eb;
                -webkit-text-fill-color: #42a5eb;
            }
            i {
                margin-right: 4px;
                &::before {
                    font-size: 32px;
                }
            }

        }
    }
    .sbi-screenreader {
        display: none;
    }

    .sbi_photo_wrap {
        a {
            display: block;
        }
        svg {
            display: none;
        }
    }

    .ig {
        width: 100%;
        max-width: 960px;
        padding: 0;
        margin-bottom: 32px;

        .account {
            font-size: 14px;
            margin-bottom: 62px;
        }

        .link_btn a {
            background-color: #44A2C1;
            &:hover {
                background-color: #6eb6cf;
            }
        }
        #sb_instagram {
            height: auto !important;
        }
        #sbi_images {
            padding: 0 !important;
            margin-bottom: 18px !important;
            .sbi_item {
                margin-bottom: 10px !important;
            }

        }

    }
}
/* //content_section instagram */


.forestMap {
    .mainForestMap {
        margin-bottom: 16px;
    }
    dialog {
        border: 0;
        display: block;
        position: fixed;
        inset: 0;
        width: 100%;
        max-width: 980px;
        transition: 0.5s ease-out;
        &:not([open]) {
            width: 0;
            display: none;
            opacity: 0;
        }
        &::backdrop {
            background-color: #e1e1e1;
            opacity: 0.8;
        }
        #forestMapImg {
            max-height: 500px;
            width: 100%;
            object-fit: contain;
        }
        button {
            cursor: pointer;
        }
    }

    .gallery-list {
        padding: 0;
        list-style: none;
        display: grid;
        grid-template-columns: repeat(5, 1fr);
        grid-template-rows: 1fr;
        &.columns-6 {
            grid-template-columns: repeat(6, 1fr);
        }
        grid-column-gap: 16px;
        grid-row-gap: 0;
        justify-content: center;
        img {
            width: 100%;
            /* height: 100%; */
            object-fit: cover;
            aspect-ratio: 4 / 3;
            border-radius: 8px;
        }
    }
    .js-image {
        cursor: pointer;
        border: none;
        background: none;
        transition: .4s;
    }
    .js-image:hover {
        opacity: 0.4;
    }
}

a.line_contact {
    text-decoration: underline;
    &:hover {
        opacity: 0.7;
    }
}

@media only screen and (width < 1460px) {
    .forestMap .gallery-list {
        grid-column-gap: 0;
    }
}

@media only screen and (width < 1184px) {
    .headMsg {
        background-size: cover;
        aspect-ratio: unset;
        width: 100%;
    }
    .column ul.postList,
    .toList {
        width: 90%;
    }
}

@media only screen and (width < 704px) {
    .headMsg {
        background-position: top left calc(50% - 64px);
    }
}

@media only screen and (width < 608px) {
    .headMsg {
        .inner {
            h1 a {
                font-size: 48px;
            }
        }
    }
}

@media only screen and (width < 432px) {
    .headMsg {
        background-image: url(/img/index/top_image_narrow.webp);
        background-color: #a3a3a3;
        background-position: top center;
        background-size: contain;
        aspect-ratio: 191 / 384;
        height: fit-content;
        .inner {
            h1 a {
                font-size: 32px;
            }
        }
    }

    .fixed_line_button {
        top: 15%;
    }
}

@media only screen and (width < 380px) {
    .headMsg {
        .inner {
            .navUL {
                li {
                    a {
                        font-size: 9cqw;
                    }
                }
            }
        }
    }
}