@charset "UTF-8";

/*全体*/
html {
    scroll-behavior: smooth;
    scroll-padding-top: 100px;
}

:root {
    --orange: #FF8828;
}

.main334 {
    color: #3e3e3e;
    font-weight: 500;
    font-size: min(3.733333vw, 16px);
}


.main334 img {
    width: 100%;
    display: block;
}

.main334 .caution {
    font-size: min(2.777778vw, 12px);
    color: #373737;
    font-weight: 400;
    letter-spacing: 0.05em;
}




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

.main334 .mv-img {
    background: #fffcc4;
}

.main334 .mv-img__top {
    position: relative;
    max-width: 1280px;
    margin: 0 auto;
}

.main334 .mv-img::before {
    content: "";
    position: absolute;
    background-image: repeating-linear-gradient(-45deg, #fce046, #fce046 4px, transparent 5px, transparent 10px);
    /* background-size: 58%; */
    height: 20px;
    width: 100%;
    background-repeat: repeat-x;
    bottom: -10px;
    z-index: 2;
}


.main334 .mv .caution {
    color: #fff;
    position: absolute;
    bottom: 20px;
    font-weight: 600;
    left: min(5.5555vw, 40px);
    text-shadow: 1px 1px 5px #00000070;
}

.main334 .select {
    display: flex;
    justify-content: center;
    align-items: center;
    position: absolute;
    bottom: 20px;
    left: 50%;
    transform: translateX(-50%);
    padding: 0 min(5.5555vw, 13px);
    width: 100%;
}

.main334 .select>a {
    transition: .3s ease-in-out;

}

.main334 .select>a:hover {
    opacity: 0.7;
}

/* content */
.main334 .content {
    background-color: #D4F9EC;
}

.main334 .content__wrapper {
    padding: 30px min(5.5555vw, 40px) 40px;
}

.main334 .content .product-area {
    background-color: #FFFFDF;
    margin: 70px auto 0;
    border-radius: 10px;
    position: relative;
    max-width: 1140px;
}

.main334 .content-ttl {
    max-width: 1140px;
    margin: 0 auto;
}

.main334 .content .product-area::before {
    content: "";
    position: absolute;
    top: min(-1vw, -5px);
    left: min(-1vw, 0px);
    display: block;
    width: 100%;
    height: 100%;
    background-image: url(../../../../../../assets/images/pages/f-static/campaign/334/334_deco02.png);
    background-size: 100% 100%;
}

.main334 .content .product-area#pro-01 {
    margin-top: 0;
}

.main334 .content .product-area#pro-02 .product-area__img {
    padding: 0 min(19.4444vw, 180px) 30px;
}

.main334 .content .product-area#pro-01 .product-area__img {
    margin-right: min(-5.5555vw, -20px);
    margin-left: min(-5.5555vw, -20px);
}

.main334 .content .product-area .product-area__wrapper {
    padding: min(5.5555vw, 40px);

}

.main334 .product-name {
    color: var(--orange);
    margin-bottom: 20px;
    font-weight: bold;
}

.main334 .product-icon {
    font-family: "Zen Maru Gothic", sans-serif;
    font-weight: 500;
    font-style: normal;
    position: absolute;
    font-size: min(6.66666vw, 55px);
    background: var(--orange);
    width: min(13.88888vw, 110px);
    line-height: min(13.88888vw, 110px);
    color: #fff;
    text-align: center;
    border-radius: 50%;
    left: -13px;
    top: -22px;
    display: flex;
    /* 中の要素（この場合はspan内のテキスト）を中央揃えにしやすくするため */
    align-items: center;
    /* 上下中央揃え */
    justify-content: center;
}

.main334 .product-name__sub {
    font-size: min(4.1666666vw, 20px);
}

.main334 .product-name__main {
    display: block;
    position: relative;
    line-height: 2;
    text-align: center;
    font-size: min(5.5555vw, 24px);
    background: var(--orange);
    color: #FFF;


}

.main334 .product-name__main:after {
    position: absolute;
    content: '';
    width: 0px;
    height: 0px;
    z-index: 1;
}

.main334 .product-name__main:after {
    top: 0;
    right: 0;
    border-width: 20px 15px 30px 0;
    border-color: transparent #ffffdf transparent transparent;
    border-style: solid;
}

.main334 .product-txt {
    line-height: 2;
    margin-bottom: 20px;
}

.main334 .product-area#pro-01 .product-txtbox .caution {
    margin-bottom: 20px;
}

/*PCむけ*/
@media (min-width: 768px) {


    .main334 .mv-img__top .mv-img__top--img {
        max-width: 774px;
        width: 60%;
        left: -81px;
        position: relative;
        z-index: 1;
    }

    .product-area .product-icon {
        /* 左右中央揃え */
        width: 80px;
        /* 円の幅（お好みのサイズに調整してください） */
        height: 80px;
        /* 円の高さ（幅と同じ値にすると正円になります） */
        font-size: 40px;
        /* 文字の太さ */
    }

    .product-area .product-icon span {
        /* spanタグ自体には特別なスタイルは不要なことが多いですが、
     もし親要素のflexbox設定だけでは不十分な場合の微調整用です。
     通常は上記の .product-icon への指定で中央に配置されます。 */
        line-height: 1;
        /* フォントによる微妙なズレを調整する際に使うことがあります */
    }

    .main334 .mv-img__right {
        width: 46%;
        position: absolute;
        right: 5%;
        top: 5%;
        transform: rotate(5deg);
    }

    .main334 .content__wrapper {
        padding-bottom: 80px;
    }

    .main334 .content-ttl {
        padding-bottom: 30px;
    }


    .main334 .limited-icon {
        position: absolute;
        width: 160px;
        height: 160px;
        z-index: 2;
        right: 10px;
        top: 20px;

    }

    .main334 .mv .caution {
        bottom: 100px;
        left: auto;
        right: 100px;
    }

    .main334 .mv-img::before {
        background-image: repeating-linear-gradient(-45deg, #fce046, #fce046 7px, transparent 8px, transparent 20px);
        height: 30px;
        bottom: -16px;
    }

    .main334 .select {
        justify-content: flex-start;
        bottom: 70px;
        left: 0;
        transform: none;
        width: 100%;
        max-width: 740px;
        z-index: 2;
    }

    .main334 .content .product-area .product-area__wrapper {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 20px 40px 0;
    }

    .main334 .content .product-area .product-area__box {
        width: 47.27%;
    }

    .main334 .content .product-area .product-area__img {
        width: 53.63%;
    }

    .main334 .content .product-area {
        border-radius: 35px;
    }

    .main334 .content .product-area::before {
        top: -10px;
        left: -10px;
        background-image: url(../../../../../../assets/images/pages/f-static/campaign/334/334_deco02-md.png);
    }

    .main334 .content .product-area#pro-02::before {
        top: -10px;
        left: -10px;
        background-image: url(../../../../../../assets/images/pages/f-static/campaign/334/334_deco03-md.png);
    }

    .main334 .content .product-area#pro-01 .product-area__img {
        margin-left: -40px;
    }

}