@charset "UTF-8";

body.top main {
    gap: 50px;
}

body.top .eyecatch-container {
    width: 100%;
    overflow-x: auto;
    scroll-snap-type: none !important; 
    scroll-behavior: auto !important; /* CSSのsmoothは絶対に切る */
    margin: 0;
    @media (max-width: 800px) {
        padding-top: 100px;
    }
    /* 以下、既存のスタイル */
    scrollbar-width: none;
    &::-webkit-scrollbar {
        display: none;
    }

    .inner {
        display: flex;
        width: max-content;
        padding-inline: calc(50% - (clamp(1px, calc(100vw - 40px), 1000px) / 2));
    }
    .img.data {
        /* 1000pxを超えず、1000px未満なら100%-40px */
        width: clamp(1px, calc(100vw - 40px), 1000px);
        background: #422219;
        color: #fff;
        flex-shrink: 0;
        display: grid;
        place-items: center;
        scroll-snap-align: center;
        position: relative;
        overflow: hidden;

        img {
            width: 100%;
        }
    }
}


body.top .eyecatch-container {
    width: 100%;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scroll-behavior: smooth;
    -webkit-overflow-scrolling: touch;
}


body.top main section {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

body.top main section.concept {
    > .body {
        line-height: 6rem;
        color: #fff;
        text-align: center;
        @media (max-width: 800px) {
            line-height: 4rem;
        }
    }
    span {
        text-align: center;
    }
}