@charset "utf-8";
/*=================== 
変数宣言
======================*/

:root {
    --main-color: rgb(237, 204, 111);
    --main-color-rgb: 237, 204, 111;
    --text-color: rgb(51, 51, 51);
    --text-color-rgb: 51, 51, 51;
    --size-sm: 1.2rem;
    --size-md: 1.6rem;
    --size-lg: 2.6rem;
    --size-xl: 4.2rem;
    --size-xxl: 6.6rem;
    --font-sans: "Noto Sans JP", serif;
    --font-serif: "Noto Serif JP", serif;
    --gutter-base: 8px;
    --contents-side-gutter: calc(var(--gutter-base)*2);
    --contents-gutter: calc(var(--gutter-base)*5);
    --contents-gutter-pc: calc(var(--gutter-base)*10);
    --section-gutter: calc(var(--gutter-base)*10);
    --section-gutter-pc: calc(var(--gutter-base)*20);
    --footer-gutter: calc(var(--gutter-base)*30);
}

html {
    font-size: 62.5%;
    scroll-behavior: smooth;
}

/* ===================================== */

.gift_inner {
    margin-top: var(--section-gutter);
    margin-inline: var(--contents-side-gutter);
}

.gift_inner .title {
    font-size: var(--size-xl);
    line-height: 1;
    margin-bottom: var(--contents-gutter);
}

.gift_inner .title span {
    display: block;
    font-size: var(--size-sm);
    line-height: 2;
}

.gift_text {
    margin-bottom: var(--contents-gutter);
}

.gift_btn {
    width: 200px;
    text-align: center;
    margin-inline: auto;
    margin-bottom: var(--contents-gutter);
    border: 1px solid #fff;
    border-radius: 24px;
    padding: 8px;
    background-color: #fff;
}

.gift_inner_wrap img {
    display: none;
}

@media screen and (min-width:520px) {
    .gift_inner_wrap img {
        display: block;
        width: 200px;
        height: 200px;
        object-fit: contain;
        /* border: #fff 1px solid; */

        opacity: 0;
        animation: fadeIn 3s cubic-bezier(0.33, 1, 0.68, 1) forwards;
    }

    @keyframes fadeIn {
        0% {
            opacity: 0;
        }

        100% {
            opacity: 1;
        }
    }


    .gift_inner_wrap {
        display: flex;
        gap: var(--contents-gutter);
        /* border: #fff 1px solid; */
        max-width: 700px;
        margin-inline: auto;
        align-items: center;

        margin-top: var(--section-gutter-pc);
    }

    .title {
        margin-inline: auto;
    }

    .gift_btn:hover {
        background-color: transparent;
        transition: 0.3s;
    }

    .gift_btn:hover a {
        color: #fff;
        transition: 0.3s;
    }
}

/*============min-width:520px============*/

/* 画像スライド */
@keyframes infinity-scroll-left {
    from {
        transform: translateX(0);
    }

    to {
        transform: translateX(-100%);
    }
}

.scroll-infinity__wrap {
    display: flex;
    overflow: hidden;
}

.scroll-infinity__list {
    display: flex;
    list-style: none;
    padding: 0
}

.scroll-infinity__list--left {
    animation: infinity-scroll-left 50s infinite linear 0.5s both;
}

.scroll-infinity__item {
    width: calc(100vw / 2);
    margin: 8px;
}

.scroll-infinity__item>img {
    width: 100%;
}

/* 右から左 */

@keyframes infinity-scroll-right {
    from {
        transform: translateX(-100%);
    }

    to {
        transform: translateX(0%);
    }
}

.scroll-infinity__list--right {
    animation: infinity-scroll-right 50s infinite linear 0.5s both;
}

@media screen and (min-width:520px) {
    .scroll-infinity__item {
        width: calc(100vw / 3);
        margin: 8px;
    }
}

/*============min-width:520px============*/