/* Top page
-------------------------------- */

.home .site-header{
    background-color: transparent;

    .header-main{
        a{
            color: var(--color-white) !important;
        }
        .site-header__logo img{
            filter: brightness(0) invert(1) !important;
        }
    }

    .site-header__hamburger-icon,
    .site-header__hamburger-icon::before,
    .site-header__hamburger-icon::after {
        background-color: var(--color-white);
    }

    &.is-scrolled,
    &.is-menu-open{
        background-color: var(--color-white) !important;

        a{
            color: var(--color-ink) !important;
        }
        .site-header__logo img{
            filter: brightness(0) invert(0) !important;
        }
    }
}

/* top-anniversary */
.top-anniversary{
    text-align: center;

    .anniversary-media{
        margin: 0;
    }
    .anniversary-text{
        margin: 3rem 0 0;
        p{
            margin-bottom: 0;
        }
    }

    @media (width <= 640px) {
        /* padding-block: var(--container-gutter); */

        .anniversary-text{
            margin-top: var(--container-gutter);
        }
        .btn-wrapper{
            margin-top: var(--container-gutter) !important;
        }
    }
}

/* top-our_brands */
.top-our_brands{
    .brand-list{
        list-style: none;
        margin: 0;
        padding: 0;
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 2rem;
    }
    .brand-list__item{
        position: relative;
        overflow: hidden;
        border-radius: var(--border-radius);
        figure{
            aspect-ratio: 4 / 5;
            img{
                width: 100%;
                height: 100%;
                object-fit: cover;
                object-position: center;
            }
        }
    }
    .brand-list__content{
        position: absolute;
        inset: 0;
        z-index: 1;
        display: flex;
        flex-direction: column;
        justify-content: flex-end;
        align-items: flex-start;
        padding: 4rem;
        background: linear-gradient(
            to top,
            rgba(0, 0, 0, 0.72) 0%,
            rgba(0, 0, 0, 0.28) 32%,
            transparent 62%
        );
        color: var(--color-white);
        @media (width <= 768px) {
            padding: 1rem;
        }
    }
    .title-sub{
        font-size: var(--fs-xl);
        margin-bottom: 1.0rem;
        font-weight: 500;
    }
    .brand-description{
        font-size: 0.8rem;
        margin-bottom: 1rem;
        text-align: left;
    }

    @media (width <= 640px) {
        .brand-list{
            grid-template-columns: repeat(1, minmax(0, 1fr));
            gap: var(--container-gutter);
        }
        .brand-list__content{
            padding: var(--container-gutter);
        }
        .brand-list__item{
            figure{
                aspect-ratio: 1 / 1;
                img{
                    object-position: bottom;
                }
            }
        }
        .title-sub{
            font-size: 24px;
            margin-bottom: 0.75rem;
            line-height: 1;
        }
        .brand-description{
            font-size: 13px;
            margin-bottom: 0;
            text-align: justify;
        }
    }
}

/* top-message */
.top-message{

    .grid{
        align-items: center;
    }

    .message-text{
        /* grid-column: 1 / 4; */
        grid-column: span 7;
        order: 1;

        .title-sub{
            /* font-size: 1.75rem; */
            margin: 2rem 0;
        }
    }
    

    .message-image{
        /* grid-column: 4 / 13; */
        grid-column: span 5;
        order: 2;
        aspect-ratio: 4 / 5;
        border-radius: var(--border-radius);
        overflow: hidden;
        img{
            width: 100%;
            height: 100%;
            object-fit: cover;
            object-position: center;
            transition: transform var(--motion-fast) var(--motion-ease);
        }
        a:hover{
            img{
                transform: scale(1.03);
            }
        }

        .figure-caption-overlay__name{
            font-size: var(--fs-2lg);
        }
    }

    @media (width <= 1024px) {
        .message-text{
            grid-column: span 5;
        }
        .message-image{
            grid-column: span 5;
        }
    }
    @media (width <= 768px) {
        .message-text{
            order: 2;
            grid-column: span 6;
        }
        .message-image{
            order: 1;
            grid-column: span 6;
            aspect-ratio: 1 / 1;
            img{
                object-position: top;
            }
        }
    }
    @media (width <= 640px) {
        .message-image{
            aspect-ratio: 4 / 5;
        }
        .btn-wrapper{
            text-align: center;
        }
    }

}


/* top-gackt */
.top-gackt{

    background-color: #232323;

    .grid{
        align-items: center;
    }

    .top-gackt-text{
        /* grid-column: 1 / 4; */
        grid-column: span 7;
        order: 2;
        color: var(--color-white) !important;
        .section-title .title{
            color: var(--color-white) !important;
        }

        .title{
            letter-spacing: 0.1rem;
        }
        .tagline{
            font-size: var(--fs-xs);
            margin-bottom: 0.5rem;
            margin-top: 0;
            letter-spacing: 0.05rem;
            font-weight: 500;
        }
        .title-sub{
            font-size: 1.75rem;
            margin: 2rem 0;

            font-family: var(--font-display);
        }
    }

    .top-gackt-image{
        /* grid-column: 4 / 13; */
        grid-column: span 5;
        order: 1;
        aspect-ratio: 4 / 5;
        overflow: hidden;
        img{
            width: 100%;
            height: 100%;
            object-fit: cover;
            object-position: center;
            transition: transform var(--motion-fast) var(--motion-ease);
        }
        a:hover{
            img{
                transform: scale(1.03);
            }
        }
    }

    @media (width <= 1024px) {
        .top-gackt-text{
            grid-column: span 5;
        }
        .top-gackt-image{
            grid-column: span 5;
        }
    }

    @media (width <= 768px) {
        .top-gackt-text{
            grid-column: span 6;
        }
        .top-gackt-image{
            grid-column: span 6;
            aspect-ratio: 1 / 1;
            img{
                object-position: top;
            }
        }
    }
    @media (width <= 640px) {
        /* padding-top: calc(var(--container-gutter) + 5px); */
        .top-gackt-text .tagline{
            line-height: 1;
            margin-top: 0.5rem;
        }
        .top-gackt-text p:last-child{
            margin-bottom: 0;
        }
    }
}


/* top-business */
.top-business{

    .grid{
        align-items: center;
    }

    .business-text{
        grid-column: span 6;
    }

    .business-gallary{
        grid-column: span 6;
        display: grid;
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 2rem;  
        figure{
            grid-column: span 1;
            height: clamp(10rem, 40vw, 768px);
            border-radius: var(--border-radius);
            overflow: hidden;
            img{
                width: 100%;
                height: 100%;
                object-fit: cover;
                object-position: center;
            }
            &:nth-child(1){
                margin-top: 4rem;
            }
            &:nth-child(2){
                margin-top: 2rem;
            }
        }
    }

    @media (width <= 1024px) {
        .business-text{
            grid-column: span 5;
        }
        .business-gallary{
            grid-column: span 5;
            gap: 1rem;
            figure{
                height: clamp(10rem, 60vw, 500px);
            }
        }
    }
    @media (width <= 768px) {
        .business-text{
            order: 2;
            grid-column: span 6;
        }
        .business-gallary{
            order: 1;
            grid-column: span 6;
            gap: 0;
            border-radius: var(--border-radius);
            overflow: hidden;
            figure{
                border-radius: 0;
                margin: 0 !important;
            }
        }
    }
    @media (width <= 640px) {
        /* padding-top: calc(var(--container-gutter) + 2px); */

        .business-text{
            text-align: center;
            .section-title{
                text-align: center;
            }
        }
    }
}


/* top-news */
.top-news{
    border-bottom: 1px solid #efefef;
    .news-list{
        list-style: none;
        margin: 3rem 0;
        padding: 0;
        border-top: 1px solid #efefef;
        li{
            a{
                display: block;
                border-bottom: 1px solid #efefef;
                transition: background-color var(--motion-fast) var(--motion-ease);

                .news-list__row{
                    display: flex;
                    flex-flow: row nowrap;
                    align-items: center;
                    padding: 2rem 1.3rem 2rem 1rem;
                    transition: transform var(--motion-fast) var(--motion-ease);
                }
                time{
                    font-size: var(--fs-sm);
                    color: #666;
                    margin-right: 3rem;
                }
                .news-arrow{
                    margin-left: auto;
                    font-size: var(--fs-sm);
                    color: #666;
                }
                &:hover{
                    background-color: #fafafa;

                    .news-list__row{
                        transform: translateX(0.3rem);
                    }
                }
            }
        }
    }

    @media (width <= 1024px) {
        .news-list__row{
            flex-flow: column nowrap !important;
            align-items: flex-start !important;
            position:relative;
            padding-right: 3rem !important;
        }

        .news-arrow{
            position: absolute;
            right: 1rem;
            top: 50%;
            transform: translateY(-50%);
        }
    }
    @media (width <= 768px) {
        .news-list{
            margin: 0;
        }
        .news-list__row{
            padding: var(--container-gutter) 0rem !important;
            .news-arrow{
                display: none;
            }
        }
    }
}