.headerBasic {
    z-index: 1;
    position: relative;
}

.headerBasic .headerInner {
    background: #fff;
    width: 100%;
}

html {
    box-sizing: border-box;
}

* {
    margin: 0;
    padding: 0;
    box-sizing: inherit;
}

body {
    min-width: 1000px;
}

.main {
    background-color: #f3d3b1;
    padding-bottom: 200px;
}

img {
    width: 100%;
    object-fit: contain;
    vertical-align: bottom;
}

ul {
    list-style: none;
}

a {
    transition: .4s;
}

a:hover {
    opacity: .8;
}

.contents {
    width: 1000px;
    margin: 0 auto;
}

@media screen and (max-width: 640px) {
    body {
        min-width: unset;
    }

    .main {
        padding-bottom: 30vw;
    }

    .contents {
        width: 100%;
        padding: 0 6.25vw;
    }
}

/* mv */
.mv__heading {
    position: relative;
}

.mv__img {
    margin-top: 0;
}

.bar__wrapper {
    position: absolute;
    display: block;
    bottom: 2.9vw;
    left: 29.3%;
    width: 7.89vw;
    overflow: hidden;
}

.bar__wrapper--g {
    width: 14.45vw;
    left: 12.5%;
}

.mv__bar {
    width: 100%;
}
.mv__lead{
    width: 741px;
    margin-inline: auto;
    padding-top: 36px;
    opacity: 0;
}

@media screen and (max-width: 1000px) {
    .bar__wrapper {
        bottom: 28px;
        width: 78.9px;
    }

    .bar__wrapper--g {
        width: 144.5px;
    }
}

@media screen and (max-width: 640px) {
    .mv__img {
        margin-top: -17px;
    }

    .bar__wrapper {
        bottom: 8vw;
        width: 14vw;
        left: 48%;
    }

    .bar__wrapper--g {
        width: 25vw;
        left: 19%;
    }
    .mv__lead{
        width: 90%;
        padding-top: 55px;
    }
}

/* lineup */
.lineup {
    background: url(../img/lineup/lineup_bg.webp);
    padding: 36px 0 54px;
    background-position-y: 130px;
    background-size: 100%;
    background-repeat: no-repeat;
}

.lineup__lists {
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: subgrid;
    grid-row: span 2;
    grid-template-areas: "lineup__01 lineup__01" "lineup__02 lineup__03";
    gap: 0 28px;
    padding-top: 130px;
    justify-content: center;
}

.lineup__product {
    display: contents;
    display: grid;
    grid-template-rows: auto 50px;
    gap: 22px;
    align-items: flex-end;
    justify-content: center;
}

.lineup__01{
    grid-area: lineup__01;
    justify-self: center;
}
.lineup__02{
    grid-area: lineup__02;
    transform: translateY(-40px);
}
.lineup__03{
    grid-area: lineup__03;
    transform: translateY(-40px);
}

.lineup__img--01 {
    width: 462px;
    transform: translateX(-64px);
}

.lineup__img--02 {
    width: 489px;
}

.lineup__img--03 {
    width: 485px;
}

.btn__link {
    height: 100%;
    width: 343px;
    z-index: 1;
}

.btn__link--01 {
    width: 100%;
}

.btn__link--02{
    justify-self: flex-end;
}

.btn__link--03 {
    justify-self: flex-start;
}

@media screen and (max-width: 640px) {
    .caution__img {
        padding: 0 4vw;
    }

    .lineup {
        background: url(../img/lineup/lineup_bg-SP.webp) no-repeat top 100vw center/100%;
        padding: 7.5vw 0 10.5vw;
    }

    .lineup__lists {
        display: flex;
        flex-direction: column;
        row-gap: 30px;
    }

    .lineup__product {
        display: initial;
    }

    .lineup__img {
        width: 91%;
        transform: translate(4.5vw, 0);
    }

    .btn__link {
        display: block;
        width: 80%;
        transform: none;
        height: 10vw;
        margin: 3vw auto;
    }
    .lineup__02{
        transform: unset;
    }
    .lineup__03{
        grid-area: lineup__03;
        transform: unset;
    }

    .btn__img {
        height: 11vw;
    }

    .lineup__img--02 {
        width: 98%;
        transform: translate(-1vw, 0);
    }

    .lineup__img--03 {
        width: 97%;
        transform: translate(3vw, 1vw);
    }

    .btn__link--02 {
        margin-top: 2vw;
    }

    .btn__link--03 {
        margin-top: 7vw;
    }

    .btn__link--04 {
        margin-top: 3.5vw;
    }

}

/* target */
.target {
    padding: 25px 0 50px;
    background: url(../img/target/target_bg.webp) no-repeat center/contain;
    margin-bottom: 98px;
}

.target__title {
    margin: 0 0 25px;
}

.target__lists {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 50px 50px;
}

.target__list {
    width: 390px;
}


@media screen and (max-width: 640px) {
    .target {
        background: url(../img/target/target_bg-SP.webp) no-repeat top center/90vw;

        margin-top: 0;
        padding: 5.5vw 11vw 14vw;
        margin-bottom: 27vw;
    }

    .target__title {
        height: 8.4vw;
        margin-bottom: 8.4vw;
    }

    .target__lists {
        gap: 13.5vw;
    }

    .target__list {
        width: 100%;
    }

    .target__img {
        height: auto;
    }

}

/* recipe */
.recipe {
    padding: 26px 0 34px;
    background: url(../img/recipe/recipe_bg.webp) no-repeat center/cover;
}

.recipe .contents {
    position: relative;
}

.recipe__wrapper {
    display: flex;
    justify-content: space-between;
    margin-top: -40px;
    margin-bottom: 20px;
}

.recipe__box {
}
.recipe__box--01 {
    width: 488px;
    margin: 0 auto;
}

.recipe__box--02 {
}

.recipe__box--03 img{
    width: 461px;
    transform: translateX(45px);
}

.recipe__img--flag {
    width: 387px;
    position: absolute;
    top: -62px;
    left: 7%;
    z-index: 1;
}

.link__recipe {
    display: block;
    margin-top: -5px;
}


@media screen and (max-width: 640px) {
    .recipe {
        padding: 0 0 9.5vw;
        background: url(../img/recipe/recipe_bg-SP.webp) no-repeat center/cover;
    }

    .recipe .contents {
        padding: 0;
    }

    .recipe__wrapper {
        display: flex;
        flex-direction: column;
        align-items: center;
        margin-top: 0;
        row-gap: 30px;
    }

    .recipe__box {
        width: 100%;
    }

    .recipe__img {
        width: 93%;
        height: auto;
    }

    .recipe__img--flag {
        position: relative;
        top: -15vw;
        left: 10vw;
        width: 65%;
    }

    .recipe__box--01 {
        margin: -31vw 0 3vw;
        padding-left: 12vw;
    }

    .recipe__box--03 {
        padding-left: 21vw;
    }

    .recipe__img--02 {
        width: 82%;
    }

    .recipe__img--03 {
        width: 94%;
    }
    .recipe__box--03 img{
        width: 100%;
        transform: unset;
    }

    .link__recipe {
        margin-top: 6.5vw;
    }

    .btn__recipe {
        height: 11.3vw;
    }
}



/* animation */
.animation--grow {
    transform: translateX(-100%);
    animation: .2s linear .4s forwards grow;
}

.animation {
    opacity: 0;
    transform: translateY(20%);
}

.animated.slideUp {
    animation: .7s forwards .2s slideUp;
}

@keyframes grow {
    0% {
        transform: translateX(-100%);
    }

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

@keyframes slideUp {
    0% {
        opacity: 0;
        transform: translateY(20%);
    }

    to {
        opacity: 1;
        transform: translateY(0%);
    }
}