:root {
    /* layout */
    --content-width: 1100px;

    /* color */
    --main: #A20067;
    --sub: #E2DDD7;
    --cta-green: #76BD22;
    --cta-blue: #0085BF;
    --vb-blue: #004C99;
    --dark-blue: #0A1A28;
    --hpm-gray: #616467;
    --white: #ffffff;

    /* font-size */
    --font-xs: 16px;
    --font-s: 16px;
    --font-m: 24px;
    --font-l: 32px;
    --font-xl: 40px;

    /* font-weight */
    --regular: 400;
    --medium: 500;
    --bold: 700;

    /* spacing */
    --spacing-0: 0;
    --spacing-half: 4px;
    --spacing-1: 8px;
    --spacing-2: 16px;
    --spacing-3: 24px;
    --spacing-4: 32px;
    --spacing-5: 40px;
    --spacing-6: 48px;
    --spacing-7: 56px;
    --spacing-8: 64px;
    --spacing-9: 72px;
    --spacing-10: 80px;
    --spacing-11: 128px;
    --spacing-12: 192px;
    --spacing-13: 256px;

    /* rounded */
    --rounded-s: 4px;
    --rounded-m: 8px;
    --rounded-l: 16px;
    --rounded-xl: 24px;
    --rounded-2xl: 32px;
    --rounded-3xl: 48px;

    /* line-height */
    --line-100: 1;
    --line-125: 1.25;
    --line-130: 1.3;
    --line-150: 1.5;
    --line-175: 1.75;
    --line-200: 2;

    /* font-family */
    --noto-sans-jp: 'Noto Sans JP', sans-serif;
    --noto-serif-jp: 'Noto Serif JP', serif;
    --arapey: 'Arapey', serif;

    @media screen and (max-width: 768px) {
        --font-xs: 12px;
        --font-s: 14px;
        --font-m: 16px;
        --font-l: 20px;
        --font-xl: 24px;
    }
}

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

html {
    /* zoom で生じるスクロールバー幅ぶんの横あふれを抑える */
    overflow-x: clip;
}

html,
body {
    font-family: var(--noto-sans-jp);
    font-size: var(--font-s);
    font-weight: var(--regular);
    line-height: var(--line-150);
    scroll-behavior: smooth;
    color: var(--dark-blue);
    background: var(--white);
}

a {
    color: inherit;
    text-decoration: none;
}

picture {
    display: block;
}

ol,
ul {
    list-style: none;
}

blockquote,
q {
    quotes: none;
}

table {
    border-spacing: 0;
    border-collapse: collapse;
}

button {
    padding: 0;
    margin: 0;
    color: var(--black);
    background-color: transparent;
    border: 0;

    &:focus-visible {
        outline: auto;
        outline-color: #2196f3;
    }
}

/* fieldset {
    border: none;
}

input {
    border: 0;

    &:focus-visible {
        outline: auto;
        outline-color: #2196f3;
    }
} */

li,
a,
p,
div,
dt,
dd {
    line-height: var(--line-150);
    text-align: left;
}

img {
    display: block;
}

body {
    background-color: var(--white);
}

main {
    overflow: hidden;
}

.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

.header {
    width: 100%;
    background-color: var(--white);
    padding: 20px 24px;

    @media (max-width: 768px) {
        padding: 8px 24px;
    }
}

.header_inner {
    width: 100%;
    max-width: 1250px;
    margin-inline: auto;
}

.header_logo {
    display: block;
    width: 100px;

    @media (max-width: 768px) {
        width: 60px;
    }

    & img {
        width: 100%;
        height: auto;
    }
}

/* ===== FV ===== */

.fv {
    width: 100%;
    height: 729px;
    padding: 32px 80px;
    position: relative;
    overflow: hidden;
    background: var(--white);
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 16px;

    /* 1440px超では1440pxのレイアウトを画面中央に置く（.fv_visual のみ全幅に広がる） */
    @media (min-width: 1441px) {
        padding-inline: calc((100% - 1440px) / 2 + 80px);
    }

    @media (max-width: 1024px) {
        height: auto;
        padding: 0;
        gap: 0;
    }
}

/* 背景写真と白グラデ。PCは全面、SPは中間の帯 */
.fv_visual {
    position: absolute;
    inset: 0;
    z-index: 0;

    @media (max-width: 1024px) {
        order: 2;
        position: relative;
        inset: auto;
        width: 100%;
        height: 250px;
    }
    
    @media (max-width: 768px) {
        height: 168px;
    }

    /* PCのみ左側を白でフェードさせてコピーを載せる */
    &::after {
        content: "";
        position: absolute;
        inset: 0;
        background: linear-gradient(-90deg, rgba(255, 255, 255, 0.00) 43.09%, var(--white) 53.51%);

        @media (max-width: 1024px) {
            content: none;
        }
    }
}

.fv_bg {
    position: absolute;
    inset: 0;
    overflow: hidden;

    /* デザインの拡大トリミングをそのまま比率で再現 */
    & img {
        position: absolute;
        left: -24.73%;
        top: -28.76%;
        width: 139.6%;
        height: 148.24%;
        object-fit: cover;

        @media (max-width: 1024px) {
            left: -68.08%;
            top: -62.57%;
            width: 171.96%;
            height: 206.36%;
        }
    }
}

.fv_logo {
    position: absolute;
    left: 44.58%;
    top: 32px;
    width: 156px;
    height: auto;
    z-index: 1;

    @media (max-width: 1440px) {
        left: 54%;
    }

    @media (max-width: 1024px) {
        left: 40px;
        top: 22px;
        width: 100px;
    }

    @media (max-width: 768px) {
        left: 24px;
        top: 22px;
        width: 59px;
    }
}

.fv_main {
    width: 508px;
    position: relative;
    z-index: 2;
    display: flex;
    flex-direction: column;
    gap: 16px;

    @media (max-width: 1024px) {
        order: 1;
        width: 100%;
        padding: 24px 0;
        gap: 8px;
        align-items: center;
        background: var(--white);
    }
}

.fv_ribbon {
    width: 408px;
    margin-inline: auto;

    @media (max-width: 1024px) {
        width: 331px;
        max-width: calc(100% - 44px);
        padding-top: 9px;
    }

    & img {
        width: 100%;
        height: auto;
    }
}

.fv_catch {
    font-family: var(--noto-serif-jp);
    font-weight: var(--bold);
    line-height: var(--line-130);
    text-align: center;
    white-space: nowrap;
    display: flex;
    flex-direction: column;
    gap: 12px;

    @media (max-width: 1024px) {
        gap: 8px;
        padding-inline: 24px;
    }
}

.fv_catchMain {
    font-size: 50px;

    @media (max-width: 1024px) {
        font-size: 35px;
    }
}

.fv_reg {
    font-size: 0.72em;
    vertical-align: super;
    line-height: 1;
}

.fv_catchSub {
    display: flex;
    align-items: flex-start;
    justify-content: center;
    font-size: 36px;
    color: var(--main);

    @media (max-width: 1024px) {
        font-size: 24px;
    }
}

.fv_catchFree {
    display: flex;
    align-items: flex-start;
}

.fv_catchNote {
    font-size: 12px;
    font-weight: var(--medium);
    align-self: flex-start;
}

.fv_features {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 16px;

    @media (max-width: 1024px) {
        gap: 11.5px;
    }
}

/* 円はベージュのグラデ＋内側の白い輪郭線 */
.fv_feature {
    width: 136px;
    height: 136px;
    flex: none;
    position: relative;
    border-radius: 50%;
    background: linear-gradient(107deg, #E2DDD7 0%, #E9E6E6 51.72%, #E2DDD7 100%);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 4px;

    @media (max-width: 1024px) {
        width: 98px;
        height: 98px;
        gap: 5.8px;
    }

    &::before {
        content: "";
        position: absolute;
        inset: 4px;
        border: 0.8px solid var(--white);
        border-radius: 50%;

        @media (max-width: 1024px) {
            inset: 3px;
        }
    }

    & p {
        position: relative;
        font-size: var(--font-s);
        font-weight: var(--bold);
        line-height: 1.2;
        text-align: center;
        white-space: nowrap;

        @media (max-width: 1024px) {
            font-size: 11.5px;
            line-height: 1.4;
        }
    }
}

.fv_featureNote {
    font-size: 10.32px;
    font-weight: var(--medium);
    vertical-align: super;

    @media (max-width: 1024px) {
        font-size: 7.74px;
    }
}

.fv_featureIcon {
    position: relative;
    height: auto;
}

.fv_featureIcon-meat {
    width: 33px;

    @media (max-width: 1024px) {
        width: 24px;
    }
}

.fv_featureIcon-stomach {
    width: 24px;

    @media (max-width: 1024px) {
        width: 17px;
    }
}

.fv_featureIcon-tooth {
    width: 24px;

    @media (max-width: 1024px) {
        width: 18px;
    }
}

.fv_notes {
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: 4px;
    font-size: 12px;
    font-weight: var(--medium);
    line-height: var(--line-130);
    color: var(--hpm-gray);

    @media (max-width: 1024px) {
        width: 327px;
        max-width: calc(100% - 48px);
        font-size: 10px;
    }
}

/* 商品パウチとキブル。PCは右下に絶対配置、SPは帯に食い込ませて流す */
.fv_goods {
    z-index: 1;
    pointer-events: none;
    position: absolute;
        width: 1440px;
        right: auto;
        left: 50%;
        margin-left: -720px;

    @media (max-width: 1024px) {
        margin-left: 0;
        order: 3;
        position: relative;
        inset: auto;
        width: 100%;
        margin-top: -80px;
        padding: 24px 24px 0;
        background: linear-gradient(180deg, rgba(255, 255, 255, 0.00) 0%, var(--white) 60%);
    }
}

.fv_goodsInner {
    @media (max-width: 1024px) {
        width: 100%;
        max-width: 327px;
        margin-inline: auto;
        position: relative;
        aspect-ratio: 327 / 101;
    }
}

.fv_bags {
    position: absolute;
    left: 42.57%;
    top: 480px;
    width: 337px;
    display: flex;
    align-items: flex-end;
    gap: 8.8px;

    @media (max-width: 1439px) {
        left: 56%;
        top: 540px;
        width: 240px;
    }

    @media (max-width: 1024px) {
        position: static;
        width: 169px;
        gap: 4.4px;
    }

    & img {
        width: 50%;
        height: auto;

        @media (max-width: 1024px) {
            width: 82px;
        }
    }
}

.fv_kibble {
    position: absolute;
    left: 67%;
    top: 460px;
    width: 577px;
    height: auto;

    @media (max-width: 1439px) {
        left: 74%;
        top: 510px;
        width: 480px;
    }

    @media (max-width: 1024px) {
        left: 49.54%;
        top: 23.76%;
        width: 68.2%;
    }
}

/* ===== FV CTA ===== */

.fv_cta {
    width: 508px;
    padding-top: 33px;
    position: relative;
    z-index: 2;

    @media (max-width: 1024px) {
        width: 100%;
        max-width: 700px;
        order: 4;
        padding: 40px 40px 48px;
        background: var(--white);
        margin-inline: auto;
    }

    @media (max-width: 768px) {
        padding: 48px 24px;
    }
}

.fv_ctaPill {
    position: absolute;
    top: 3px;
    left: 50%;
    translate: -50% 0;
    padding: 8px 16px 10px;
    border: 2px solid var(--main);
    border-radius: 50px;
    background: var(--white);
    color: var(--main);
    font-size: var(--font-s);
    font-weight: var(--bold);
    line-height: var(--line-150);
    white-space: nowrap;

    @media (max-width: 768px) {
        top: 0;
        width: 286px;
        max-width: calc(100% - 48px);
        font-size: 14px;
        text-align: center;
    }
}

.fv_ctaBox {
    padding: 16px 24px;
    border-radius: 8px;
    background: var(--main);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;

    @media (max-width: 1024px) {
        padding: 40px 24px 16px;
    }

    @media (max-width: 768px) {
        padding: 24px 8px 16px;
    }
}

.fv_ctaLead {
    display: flex;
    align-items: flex-start;
    justify-content: center;
    gap: 10px;
    color: var(--white);
    font-size: var(--font-s);
    font-weight: var(--bold);
    line-height: var(--line-150);
    white-space: nowrap;

    @media (max-width: 1024px) {
        gap: 8px;
    }
}

.fv_ctaLeadFree {
    display: flex;
    align-items: center;
    gap: 8px;

    & img {
        width: 28px;
        height: auto;
    }
}

.fv_ctaButtons {
    display: flex;
    align-items: stretch;
    gap: 8px;

    @media (max-width: 1024px) {
        width: 100%;
        gap: 16px;
    }

    @media (max-width: 768px) {
        gap: 8px;
    }
}

.fv_ctaButton {
    width: 226px;
    padding: 8px;
    border-radius: 8px;
    display: flex;
    align-items: center;
    gap: 16px;
    color: var(--white);
    position: relative;
    overflow: hidden;
    animation: ctaButtonPulse 2s ease-in-out infinite;

    &::after {
        content: "";
        position: absolute;
        top: 0;
        left: 0;
        width: 40%;
        height: 100%;
        pointer-events: none;
        background: linear-gradient(90deg,
                rgba(255, 255, 255, 0) 0%,
                rgba(255, 255, 255, .4) 50%,
                rgba(255, 255, 255, 0) 100%);
        transform: skewX(-20deg) translateX(-150%);
        animation: ctaButtonShine 2s ease-in-out infinite;
    }

    @media (max-width: 1024px) {
        width: auto;
        flex: 1 1 0;
        min-width: 0;
        gap: 4px;
        justify-content: center;
    }

    @media (any-hover: hover) {
        &:hover {
            animation: none;

            &::after {
                animation: none;
            }
        }
    }
}

@keyframes ctaButtonPulse {
    0%,
    100% {
        transform: scale(1);
    }

    50% {
        transform: scale(1.02);
    }
}

@keyframes ctaButtonShine {
    0% {
        transform: skewX(-20deg) translateX(-150%);
    }

    50%,
    100% {
        transform: skewX(-20deg) translateX(400%);
    }
}

@media (prefers-reduced-motion: reduce) {

    .fv_ctaButton,
    .fv_ctaButton::after,
    .floating_button,
    .floating_button::after {
        animation: none;
    }
}

.fv_ctaButton-dog {
    background-color: var(--cta-blue);

    @media (any-hover: hover) {
        &:hover {
            background-color: #2C9BCC;
        }
    }
}

.fv_ctaButton-cat {
    background-color: var(--cta-green);

    @media (any-hover: hover) {
        &:hover {
            background-color: #9FC76F;
        }
    }
}

.fv_ctaIcon,
.fv_ctaArrow {
    width: 33px;
    height: auto;
    flex: none;

    @media (max-width: 1024px) {
        width: 16px;
    }
}

.fv_ctaText {
    font-size: var(--font-s);
    font-weight: var(--bold);
    line-height: var(--line-150);
    white-space: nowrap;

    @media (max-width: 1024px) {
        font-size: 12px;
        line-height: var(--line-130);
    }
}

.about {
    width: 100%;
    height: 600px;
    position: relative;

    @media (max-width: 768px) {
        height: auto;
    }
}

.about_bg {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;

    @media (max-width: 1024px) {
        height: 400px;
    }

    @media (max-width: 768px) {
        height: 300px;
    }

    @media (max-width: 568px) {
        height: 200px;
    }

    & picture {
        width: 100%;
        height: 100%;
        & img {
            width: 100%;
            height: 100%;
            object-fit: cover;
        }
    }
}

.about_main {
    width: 100%;
    height: 100%;
    padding: 80px;
    background: linear-gradient(90deg, #F7FBFF 42.36%, rgba(255, 255, 255, 0.00) 73.33%);
    position: relative;

    @media (max-width: 1024px) {
        padding: 64px 40px;
        background: linear-gradient(15deg, #F7FBFF 51%, rgba(255, 255, 255, 0.00) 78.35%);
    }

    @media (max-width: 768px) {
        padding: 40px 24px 64px;
        background: linear-gradient(15deg, #F7FBFF 44%, rgba(255, 255, 255, 0.00) 78.35%);
    }

    @media (max-width: 568px) {
        background: linear-gradient(15deg, #F7FBFF 63.11%, rgba(255, 255, 255, 0.00) 78.35%);
    }
}

.about_content {
    width: 100%;
    max-width: var(--content-width);
    height: 100%;
    margin-inline: auto;
    display: flex;
    align-items: center;
}

.about_text {
    display: flex;
    flex-direction: column;
    gap: 24px;
}

.about_head {
    display: flex;
    flex-direction: column;
    gap: 16px;

    & img {
        width: 115px;
    }

    h2 {
        font-size: var(--font-l);
        line-height: 1.5;
    }
}

.about_catch {
    font-size: var(--font-m);
    font-weight: var(--bold);
    line-height: 1.5;
    color: var(--vb-blue);

}

.about_description {
    & br {
        @media (max-width: 480px) {
            display: none;
        }
    }
}

.about_label {
    width: 100%;
    max-width: 350px;
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 16px 24px;
    border-radius: 8px;
    box-shadow: 0 0 4px 0 #C4D1DF;

    @media (max-width: 768px) {
        max-width: 300px;
        padding: 8px 16px;
    }

    & img {
        width: 30px;
        height: 30px;
        object-fit: cover;
    }

    & p {
        color: var(--vb-blue);
        font-weight: var(--bold);
    }
}

.worries {
    width: 100%;
    margin-top: -80px;

    @media (max-width: 768px) {
        margin-top: -45px;
    }
}

.worries_head {
    width: 100%;
    padding: 73px 24px 24px;
    position: relative;

    @media (max-width: 768px) {
        padding: 55px 24px 8px;
    }

    /* 上辺の波形。曲線より上は透過させて前セクションの背景を透かす */
    &::before {
        content: "";
        position: absolute;
        inset: 0;
        bottom: -1px;
        background:
            url(../images/worries_wave.svg) no-repeat top center / 100% 80px,
            linear-gradient(var(--sub), var(--sub)) no-repeat bottom center / 100% calc(100% - 80px);

        @media (max-width: 768px) {
            background:
                url(../images/worries_wave_sp.svg) no-repeat top center / 100% 50px,
                linear-gradient(var(--sub), var(--sub)) no-repeat bottom center / 100% calc(100% - 50px);
        }
    }
}

.worries_title {
    position: relative;
    font-size: var(--font-l);
    font-weight: var(--bold);
    line-height: var(--line-150);
    text-align: center;

    & span {
        color: var(--main);
    }
}

.worries_body {
    width: 100%;
    height: 550px;
    position: relative;

    @media (max-width: 768px) {
        height: auto;
        aspect-ratio: 750 / 792;
    }
}

.worries_bg {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;

    & picture {
        width: 100%;
        height: 100%;
        & img {
            width: 100%;
            height: 100%;
            object-fit: cover;
        }
    }

    /* 写真上端のなじませ */
    &::before {
        content: "";
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 145px;
        background: linear-gradient(181deg, var(--sub) 15.14%, rgba(226, 221, 215, 0.00) 68.48%);

        @media (max-width: 768px) {
            height: 90px;
            background: linear-gradient(186deg, var(--sub) 22.28%, rgba(226, 221, 215, 0.00) 55.91%);
        }
    }
}

.worries_main {
    width: 100%;
    height: 100%;
    padding: 0 40px;
    background: linear-gradient(90deg, #E2DDD7 11.63%, rgba(226, 221, 215, 0.00) 46.62%, #E2DDD7 87.93%);
    position: relative;


    @media (max-width: 768px) {
        padding: 0 24px;
        background: linear-gradient(90deg, #E2DDD7 0.21%, rgba(226, 221, 215, 0.29) 13.89%, rgba(226, 221, 215, 0.00) 70.59%, #E2DDD7 99.5%);
    }
}

.worries_list {
    width: 100%;
    max-width: 1040px;
    height: 100%;
    margin-inline: auto;
    position: relative;
    container-type: inline-size;
}

.worries_item {
    position: absolute;
    width: 28.27%;
    aspect-ratio: 294 / 134;
    display: flex;
    align-items: center;
    justify-content: center;
    /* しっぽ分を差し引いて本体の中央にテキストを置く */
    padding-bottom: 1.42%;
    background-repeat: no-repeat;
    background-position: center;
    background-size: 100% 100%;

    @media (max-width: 768px) {
        width: 46.18%;
        height: 21.46%;
        aspect-ratio: auto;
        padding-bottom: 3.3%;
    }

    & p {
        font-size: min(var(--font-m), 2.31cqw);
        font-weight: var(--medium);
        line-height: var(--line-150);
        text-align: center;
        white-space: nowrap;
        color: var(--white);

        @media (max-width: 768px) {
            font-size: min(var(--font-m), 4.28cqw);
        }
    }
}

.worries_item-01 {
    top: 22.18%;
    left: 0;
    background-image: url(../images/worries_balloon_right.svg);

    @media (max-width: 768px) {
        top: 20.71%;
        left: auto;
        right: 0;
        background-image: url(../images/worries_balloon_sp_left.svg);
    }
}

.worries_item-02 {
    top: 10%;
    right: 5.67%;
    background-image: url(../images/worries_balloon_left.svg);

    @media (max-width: 768px) {
        top: 54.8%;
        right: auto;
        left: 0;
        background-image: url(../images/worries_balloon_sp_right.svg);
    }
}

.worries_item-03 {
    top: 67.82%;
    left: 5.77%;
    background-image: url(../images/worries_balloon_right.svg);

    @media (max-width: 768px) {
        top: 4.04%;
        left: 0;
        width: 45.57%;
        height: 18.94%;
        background-image: url(../images/worries_balloon_sp_right.svg);
    }
}

.worries_item-04 {
    top: 60.55%;
    right: 0;
    background-image: url(../images/worries_balloon_left.svg);

    @media (max-width: 768px) {
        top: 74.49%;
        background-image: url(../images/worries_balloon_sp_left.svg);
    }
}

.br-sp {
    display: none;

    @media (max-width: 768px) {
        display: inline;
    }
}

.only-sp {
    display: none;

    @media (max-width: 768px) {
        display: block;
    }
}

.only-pc {
    @media (max-width: 768px) {
        display: none;
    }
}

/*
 * FVのみ1024px以下でSPレイアウトに切り替わるため、
 * FV内のユーティリティも同じ幅で切り替える。
 */
@media (min-width: 769px) and (max-width: 1024px) {
    .fv .br-sp {
        display: inline;
    }

    .fv .only-sp {
        display: block;
    }

    .fv .only-pc {
        display: none;
    }
}

.trial {
    width: 100%;
    min-height: 203px;
    padding: 40px 24px;
    /* 上に白グラデ、下に敷く明るいグラデの2枚重ね。下端のV字から地の赤紫が覗く */
    background:
        url(../images/trial_wave_front.svg) no-repeat top center / 100% 197px,
        url(../images/trial_wave_back.svg) no-repeat top center / 100% 203px,
        var(--main);

    @media (max-width: 768px) {
        min-height: 195px;
        padding: 32px 24px 8px;
        background:
            url(../images/trial_wave_sp.svg) no-repeat top center / 100% 195px,
            var(--main);
    }
}

.trial_content {
    width: 100%;
    max-width: 742px;
    margin-inline: auto;
    display: flex;
    flex-direction: column;
    gap: 8px;

    @media (max-width: 768px) {
        max-width: 327px;
        gap: 4px;
    }
}

.trial_lead {
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: var(--font-m);
    font-weight: var(--medium);
    line-height: var(--line-150);

    /* SPは「愛犬家・愛猫家の皆さまへ」が1行目に来る */
    @media (max-width: 768px) {
        flex-wrap: wrap;
        row-gap: 4px;
        font-weight: var(--bold);
    }
}

.trial_lead-02 {
    @media (max-width: 768px) {
        order: -1;
        width: 100%;
        text-align: center;
    }
}

.trial_paw {
    width: 35px;
    margin-left: 9px;

    @media (max-width: 768px) {
        width: 26px;
        margin-left: 4px;
    }
}

.trial_catch {
    font-size: var(--font-l);
    font-weight: var(--bold);
    line-height: var(--line-150);
    text-align: center;
    color: var(--main);
}

/* ===== sample（ページ内で3回使うためidは持たせない） ===== */

.sample {
    width: 100%;
    position: relative;
    background: var(--main);
    overflow: hidden;
}

.sample_dome {
    position: absolute;
    top: 260px;
    bottom: 0;
    left: 50%;
    translate: -50% 0;
    width: 156.39%;
    background: var(--white);
    /* zoom 配下では vw が拡縮しないため 1440px 基準のpxで固定（68.61vw @1440 = 988px） */
    border-radius: 50% 50% 0 0 / 988px 988px 0 0;

    @media (max-width: 768px) {
        top: 165px;
        width: 201.33%;
        border-radius: 50% 50% 0 0 / 76.27vw 76.27vw 0 0;
    }
}

.sample_intro {
    width: 100%;
    max-width: 1000px;
    margin-inline: auto;
    padding: 80px 24px 0;
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 40px;

    @media (max-width: 768px) {
        max-width: 375px;
        padding: 32px 24px 0;
        gap: 16px;
    }
}

.sample_catchBlock {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 16px;

    @media (max-width: 768px) {
        gap: 4px;
    }
}

.sample_catch {
    display: flex;
    align-items: flex-end;
    justify-content: center;
    gap: 4px;
    color: var(--white);
    font-size: var(--font-m);
    font-weight: var(--bold);
    line-height: var(--line-150);
    white-space: nowrap;
}

.sample_kagi {
    width: 48px;

    @media (max-width: 768px) {
        width: 18px;
    }
}

.sample_kagi-right {
    scale: -1 1;
}

.sample_catchText {
    display: flex;
    align-items: flex-end;
}

.sample_free {
    font-size: 80px;
    line-height: var(--line-100);

    @media (max-width: 768px) {
        font-size: 40px;
    }
}

.sample_note {
    font-size: 12px;
    font-weight: var(--medium);
    line-height: var(--line-130);
    align-self: flex-start;

    @media (max-width: 768px) {
        font-size: 10px;
    }
}

.sample_catchNote {
    color: var(--white);
    font-size: 12px;
    font-weight: var(--medium);
    line-height: var(--line-130);

    @media (max-width: 768px) {
        font-size: 10px;
    }
}

.sample_product {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 24px;

    @media (max-width: 768px) {
        gap: 8px;
    }
}

.sample_productImage {
    width: 409px;
    height: auto;

    @media (max-width: 768px) {
        width: 224px;
        max-width: 100%;
        flex: 0 1 auto;
        min-width: 0;
    }
}

.sample_spec {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 16px;

    @media (max-width: 768px) {
        gap: 8px;
    }
}

.sample_badge {
    width: 102px;
    height: 102px;
    display: grid;
    place-items: center;
    position: relative;
    border-radius: 50%;
    background: linear-gradient(-30deg, #E2DDD7 13.39%, #FFFFFF 50%, #E2DDD7 86.61%);
    font-size: var(--font-s);
    font-weight: var(--bold);
    line-height: 1.3;
    text-align: center;

    @media (max-width: 768px) {
        width: 87px;
        height: 87px;
    }

    &::before {
        content: "";
        position: absolute;
        inset: 3px;
        border: 1.16px solid #B3B3B3;
        border-radius: 50%;
    }
}

.sample_specList {
    display: flex;
    flex-direction: column;
    gap: 8px;

    @media (max-width: 768px) {
        gap: 4px;
    }

    & li {
        display: flex;
        align-items: center;
        gap: 6px;
        font-size: var(--font-s);
        font-weight: var(--bold);
        line-height: var(--line-150);
        white-space: nowrap;

        &:not(:first-child) {
            padding-top: 8px;
            border-top: 1.16px solid #B3B3B3;

            @media (max-width: 768px) {
                padding-top: 4px;
            }
        }

        & img {
            width: 24px;
            height: auto;
        }
    }
}

.sample_about {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 24px;

    @media (max-width: 768px) {
        gap: 16px;
    }
}

.sample_aboutHead {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;

    @media (max-width: 768px) {
        gap: 16px;
    }
}

.sample_logo {
    width: 158.5px;

    @media (max-width: 768px) {
        width: 96px;
    }
}

.sample_aboutTitle {
    font-size: var(--font-l);
    font-weight: var(--bold);
    line-height: var(--line-150);
    white-space: nowrap;
}

.sample_aboutText {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 24px;

    @media (max-width: 768px) {
        gap: 16px;
        width: 100%;
    }
}

.sample_aboutLead {
    display: flex;
    align-items: flex-start;
    justify-content: center;
    font-size: var(--font-s);
    font-weight: var(--medium);
    line-height: var(--line-150);

    @media (max-width: 768px) {
        flex-wrap: wrap;
        row-gap: 8px;
        font-weight: var(--bold);
    }
}

/* SPでは「犬・猫用総合栄養食です。」が2行目に回る */
.sample_aboutLead-02 {
    @media (max-width: 768px) {
        width: 100%;
        text-align: center;
    }
}

.sample_label {
    display: flex;
    align-items: flex-start;
    gap: 4px;
    padding: 2px 5px 3px 8px;
    margin-right: 5px;
    background: var(--dark-blue);
    color: var(--white);
    font-weight: var(--bold);
    white-space: nowrap;

    & .sample_note {
        color: #F0F2F2;
    }
}

.sample_aboutNote {
    color: var(--hpm-gray);
    font-size: 12px;
    font-weight: var(--medium);
    line-height: var(--line-130);
    text-align: center;

    @media (max-width: 768px) {
        width: 100%;
        font-size: 10px;
        line-height: var(--line-150);
        text-align: left;
    }
}

.sample_body {
    width: 100%;
    padding: 40px 40px 80px;
    position: relative;
    background: var(--white);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 24px;

    @media (max-width: 768px) {
        padding: 24px 24px 40px;
    }
}

.sample_benefit {
    width: 100%;
    max-width: 800px;
    padding-top: 18px;
    position: relative;

    @media (max-width: 768px) {
        padding-top: 33px;
    }
}

.sample_benefitRibbon {
    position: absolute;
    top: 0;
    left: 50%;
    translate: -50% 0;
    width: 711px;
    max-width: 100%;
    padding: 4px 0 7px;
    background: url(../images/sample_ribbon.svg) no-repeat center / 100% 100%;
    font-size: var(--font-m);
    font-weight: var(--bold);
    line-height: var(--line-150);
    text-align: center;

    @media (max-width: 768px) {
        width: 235px;
        top: 2px;
        padding: 5px 0;
        background-image: url(../images/sample_ribbon_sp.svg);
        line-height: 1.4;
    }

    & span {
        color: var(--main);
    }
}

.sample_benefitCard {
    padding: 48px 64px 24px;
    border-radius: 16px;
    background: var(--white);
    box-shadow: 0 4px 26px 0 rgba(111, 111, 111, 0.20);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 24px;


    @media (max-width: 768px) {
        padding: 32px 16px 16px;
        gap: 16px;
    }
}

.sample_benefitLead {
    font-size: var(--font-s);
    font-weight: var(--medium);
    line-height: var(--line-150);
    text-align: center;

    @media (max-width: 768px) {
        text-align: left;
    }
}

.sample_benefitList {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;

    @media (max-width: 768px) {
        flex-direction: column;
        gap: 4px;
    }
}

.sample_benefitItem {
    flex: 1 1 0;
    min-width: 0;
    align-self: stretch;
    padding: 24px;
    border-radius: 16px;
    background: #FAEEEE;
    display: flex;
    flex-direction: column;
    gap: 4px;

    @media (max-width: 768px) {
        width: 100%;
        flex: none;
        padding: 16px;
        gap: 16px;
    }
}

.sample_benefitMain {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;

    @media (max-width: 768px) {
        flex-direction: row;
        align-items: center;
        justify-content: space-between;
        gap: 8px;
    }
}

.sample_benefitHead {
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: 16px;

    @media (max-width: 768px) {
        width: auto;
        flex: 1 1 0;
        min-width: 0;
        gap: 8px;
    }
}

.sample_benefitTag {
    width: 69px;
    padding: 3px 0;
    background: url(../images/sample_tag.svg) no-repeat center / 100% 100%;
    color: var(--white);
    font-size: var(--font-s);
    font-weight: var(--bold);
    line-height: var(--line-150);
    text-indent: 7px;

    @media (max-width: 768px) {
        width: 64px;
        padding: 2px 0;
    }
}

.sample_benefitTitle {
    display: flex;
    flex-direction: column;
    gap: 2px;
    color: var(--main);
    font-size: var(--font-m);
    font-weight: var(--bold);
    line-height: var(--line-150);

    @media (max-width: 768px) {
        gap: 0;
    }
}

.sample_benefitSub {
    color: var(--dark-blue);

    /* .sample_benefitTitle p の display:flex に勝たせる */
    &.only-sp {
        display: none;

        @media (max-width: 768px) {
            display: flex;
        }
    }
}

.sample_benefitSize {
    color: var(--hpm-gray);
    font-size: 12px;
    font-weight: var(--medium);
    line-height: var(--line-130);

    @media (max-width: 768px) {
        font-size: 10px;
        line-height: var(--line-150);
    }
}

.sample_benefitImage {
    width: 155px;
    height: auto;

    @media (max-width: 768px) {
        width: 74px;
        flex: none;
    }
}

.sample_benefitNote {
    color: var(--hpm-gray);
    font-size: var(--font-s);
    font-weight: var(--medium);
    line-height: var(--line-150);

    @media (max-width: 768px) {
        font-size: 12px;
        line-height: var(--line-130);
    }
}

.sample_benefitPlus {
    width: 48px;
    height: 48px;
    flex: none;

    @media (max-width: 768px) {
        width: 28px;
        height: 28px;
    }
}

.sample_cta {
    width: 100%;
    padding-top: 24px;
    display: flex;
    justify-content: center;

    @media (max-width: 768px) {
        padding-top: 0;
    }
}

.sample_ctaButton {
    width: 100%;
    max-width: 507px;
    padding: 12px 28px;
    position: relative;
    border-radius: 9px;
    background: var(--main);
    box-shadow: 0 4.639px 4.639px 0 rgba(0, 0, 0, 0.25);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    transition: background-color .35s ease;

    @media (max-width: 768px) {
        max-width: 327px;
        padding: 16px;
        gap: 8px;
        border-radius: 8px;
    }

    @media (any-hover: hover) {
        &:hover {
            background-color: #880057;
        }
    }

    &::before {
        content: "";
        position: absolute;
        inset: 3px;
        border: 1.16px solid var(--white);
        border-radius: 6px;
        pointer-events: none;
    }
}

.sample_ctaBadge {
    width: 94px;
    height: 94px;
    flex: none;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 2px;
    position: relative;
    border-radius: 50%;
    background: linear-gradient(110.63deg, #E2DDD7 7.2%, #FFFFFF 46.3%, #E2DDD7 82.8%);
    color: var(--dark-blue);
    font-size: var(--font-s);
    font-weight: var(--bold);
    line-height: var(--line-125);
    text-align: center;

    @media (max-width: 768px) {
        width: 74px;
        height: 74px;
        font-size: 12px;
        line-height: var(--line-130);
    }

    &::before {
        content: "";
        position: absolute;
        inset: 2px;
        border: 1px solid #B3B3B3;
        border-radius: 50%;
    }

    & img {
        width: 14px;
        height: 14px;
    }

    & span {
        position: relative;
    }
}

.sample_ctaText {
    display: flex;
    flex-direction: column;
    align-items: center;
    color: var(--white);
    text-align: center;
}

.sample_ctaSub {
    padding-bottom: 5px;
    border-bottom: 1.16px solid var(--white);
    font-size: var(--font-s);
    font-weight: var(--medium);
    line-height: var(--line-150);
    white-space: nowrap;
}

.sample_ctaMain {
    font-size: var(--font-l);
    font-weight: var(--bold);
    line-height: var(--line-150);
    white-space: nowrap;
}

.sample_ctaArrow {
    width: 40px;
    height: 40px;
    flex: none;

    @media (max-width: 768px) {
        width: 30px;
        height: 30px;
    }
}

/* ===== reasons（選ばれる4つの理由） ===== */

.reasons {
    width: 100%;
    background: #F0F2F2;
}

/* 見出し。下辺のV字を2枚重ね、ベージュの下から薄いグレーが覗く */
.reasons_head {
    width: 100%;
    height: 270px;
    padding: 40px 24px 0;
    position: relative;
    z-index: 1;
    isolation: isolate;

    @media (max-width: 768px) {
        height: 244px;
        padding: 26px 24px 0;
    }

    &::before,
    &::after {
        content: "";
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
    }

    &::before {
        height: 270px;
        background: linear-gradient(0deg, #F5F5F5 0%, #FFFFFF 100%);
        clip-path: polygon(0 0, 100% 0, 100% 77.24%, 50% 100%, 0 77.24%);

        @media (max-width: 768px) {
            height: 244px;
            clip-path: polygon(0 0, 100% 0, 100% 75.41%, 50% 100%, 0 75.41%);
        }
    }

    &::after {
        height: 258px;
        background: linear-gradient(148deg, #E2DDD7 0%, #FFFFFF 53.88%, #E2DDD7 100%);
        clip-path: polygon(0 0, 100% 0, 100% 70.39%, 50% 100%, 0 70.39%);

        @media (max-width: 768px) {
            height: 238px;
            background: linear-gradient(116deg, #E2DDD7 0%, #E9E6E6 51.72%, #E2DDD7 100%);
            clip-path: polygon(0 0, 100% 0, 100% 67.9%, 50% 100%, 0 67.9%);
        }
    }
}

.reasons_headTitle {
    position: relative;
    z-index: 1;
    font-size: var(--font-l);
    font-weight: var(--bold);
    line-height: var(--line-150);
    text-align: center;

    @media (max-width: 768px) {
        font-size: var(--font-l);
        color: var(--main);
    }
}

.reasons_headCount {
    margin-top: 24px;
    position: relative;
    z-index: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 24px;

    @media (max-width: 768px) {
        margin-top: 16px;
        gap: 16px;
    }
}

.reasons_laurel {
    width: 42.5px;
    height: auto;
    flex: none;

    @media (max-width: 768px) {
        width: 31px;
    }
}

.reasons_laurel-right {
    scale: -1 1;
}

/* gapは月桂樹との間だけ。「4」と「つの理由」は隙間なしで下端揃え */
.reasons_headCountText {
    display: flex;
    align-items: flex-end;
}

.reasons_headNum,
.reasons_num {
    font-family: var(--arapey);
    font-style: italic;
    font-weight: var(--regular);
    line-height: 0.7;
    background: linear-gradient(149deg, rgba(97, 100, 103, 0.80) 29.99%, #E2DDD7 57.69%, #616467 101.72%);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}

.reasons_headNum {
    font-size: 120px;
    width: 70px;

    @media (max-width: 768px) {
        font-size: 80px;
        width: 40px;
    }
}

.reasons_headUnit {
    font-family: var(--noto-serif-jp);
    font-size: var(--font-l);
    font-weight: var(--bold);
    line-height: var(--line-130);

    @media (max-width: 768px) {
        font-family: var(--noto-sans-jp);
        font-weight: var(--medium);
        line-height: var(--line-150);
    }
}

/* PCは1000pxのコンテンツカラム。左右には地の #F0F2F2 が覗く */
.reasons_body {
    width: 100%;
    max-width: 1000px;
    margin-inline: auto;
    margin-top: -85px;

    @media (max-width: 768px) {
        margin-top: -60px;
    }
}

.reasons_item {
    width: 100%;
    padding: 80px 100px;
    position: relative;


    @media (max-width: 768px) {
        padding: 40px 24px;
    }
}

.reasons_itemHead {
    display: flex;
    align-items: flex-start;
    gap: 32px;

    @media (max-width: 768px) {
        flex-direction: column;
        gap: 16px;
    }
}

.reasons_num {
    flex: none;
    font-size: 120px;
    width: 120px;

    @media (max-width: 768px) {
        font-size: 80px;
        width: 80px;
    }
}

.reasons_itemText {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.reasons_lead {
    font-size: var(--font-m);
    font-weight: var(--medium);
    line-height: var(--line-150);
}

.reasons_title {
    font-size: var(--font-xl);
    font-weight: var(--bold);
    line-height: var(--line-150);
    display: flex;
    align-items: flex-start;
}

.reasons_titleSub {
    color: #36393D;
}

.reasons_desc {
    font-size: var(--font-m);
    font-weight: var(--medium);
    line-height: var(--line-150);
}

.reasons_reg {
    font-weight: var(--bold);
}

.reasons_note {
    font-size: 12px;
    font-weight: var(--medium);
    line-height: var(--line-130);
    color: var(--hpm-gray);
    align-self: flex-start;
    white-space: nowrap;

    @media (max-width: 768px) {
        font-size: 10px;
    }
}

.reasons_annotation {
    font-size: 12px;
    font-weight: var(--medium);
    line-height: var(--line-130);
    color: var(--hpm-gray);

    @media (max-width: 768px) {
        font-size: 10px;
        line-height: var(--line-150);
    }
}

.reasons_annotation-right {
    text-align: right;
}

/* --- 01_低糖質高タンパク --- */

.reasons_item-01 {
    background: var(--white);
    padding: 120px 0 80px 100px;


    @media (max-width: 768px) {
        padding: 40px 24px 177px;
    }

    & .reasons_itemHead {
        align-items: center;
        position: relative;
        z-index: 1;

        @media (max-width: 768px) {
            align-items: flex-start;
        }
    }
}

.reasons_bowl {
    position: absolute;
    right: 0;
    bottom: 0;
    width: 383px;
    max-width: 50%;
    pointer-events: none;

    @media (max-width: 1024px) {
        width: 260px;
    }

    @media (max-width: 768px) {
        width: 100%;
        max-width: none;
    }

    & img {
        width: 100%;
        height: 100%;
        object-fit: cover;
    }
}

/* --- 01_サポート項目 --- */

.reasons_support {
    width: 100%;
    background: var(--white);
}

.reasons_supportInner {
    width: 100%;
    padding: 40px 100px;
    background: linear-gradient(140deg, #E2DDD7 23.03%, #E9E6E6 55.06%, #E2DDD7 84.97%);
    display: flex;
    align-items: flex-start;
    gap: 24px;

    @media (max-width: 768px) {
        flex-direction: column;
        align-items: center;
        padding: 32px 24px;
        gap: 16px;
    }
}

.reasons_supportBadges {
    width: 100%;
    max-width: 428px;
    flex-shrink: 0;

    @media (max-width: 1024px) {
        max-width: 327px;
    }

    & img {
        width: 100%;
        height: auto;
    }
}

.reasons_supportNote {
    font-size: 12px;
    font-weight: var(--medium);
    line-height: var(--line-130);
    color: var(--hpm-gray);
    text-align: right;
    margin-top: 8px;

    @media (max-width: 768px) {
        font-size: 10px;
        line-height: var(--line-150);
    }
}

.reasons_supportList {
    display: flex;
    flex-direction: column;
    gap: 18.5px;

    @media (max-width: 768px) {
        width: 100%;
        gap: 8px;
    }

    & li {
        display: flex;
        align-items: center;
        gap: 16px;
        font-size: var(--font-m);
        font-weight: var(--bold);
        line-height: var(--line-150);

        @media (max-width: 768px) {
            align-items: flex-start;
            gap: 16px;
        }

        & img {
            width: 32px;
            height: auto;
            flex: none;

            @media (max-width: 768px) {
                width: 24px;
            }
        }
    }
}

/* --- 02_健康でおいしい --- */

.reasons_item-02 {
    min-height: 620px;
    background: linear-gradient(0deg, #F8F8F8 62.94%, #FFFFFF 99.59%);
    overflow: hidden;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 40px;

    @media (max-width: 1024px) {
        padding-bottom: 200px;
    }

    @media (max-width: 768px) {
        min-height: 0;
        padding: 40px 24px 186px;
        background: none;
        align-items: flex-start;
        gap: 16px;
    }
}

.reasons_item-02 .reasons_itemHead,
.reasons_item-03 .reasons_itemHead,
.reasons_item-04 .reasons_itemHead {
    width: 100%;
    max-width: 800px;
}

/* 写真は背面、グラフカードは前面（デザインの重ね順） */
.reasons_item-02 .reasons_itemHead,
.reasons_item-02 .reasons_charts {
    position: relative;
    z-index: 1;
}

.reasons_charts {
    width: 100%;
    max-width: 542px;
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 8px;

    @media (max-width: 768px) {
        max-width: none;
        gap: 4px;
    }
}

.reasons_chartsNote {
    font-size: 10px;
    font-weight: var(--medium);
    line-height: var(--line-130);
    color: var(--hpm-gray);
}

.reasons_chartList {
    width: 100%;
    display: flex;
    justify-content: center;
    gap: 16px;

    @media (max-width: 768px) {
        gap: 10px;
    }
}

.reasons_chartCard {
    width: 263px;
    height: 307px;
    padding: 16px 26px 16px 20px;
    border-radius: 16px;
    background: var(--white);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 12px;

    @media (max-width: 768px) {
        width: 50%;
        height: auto;
        aspect-ratio: 159 / 185;
        padding: 10px 14px;
        gap: 8px;
    }
}

.reasons_chartCard-dog {
    border: 1px solid #0083C0;
}

.reasons_chartCard-cat {
    border: 1px solid var(--cta-green);
}

.reasons_chartHead {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: var(--font-s);
    font-weight: var(--bold);
    line-height: var(--line-150);
    white-space: nowrap;

    @media (max-width: 768px) {
        font-size: 12px;
        gap: 4px;
    }

    & img {
        width: 47px;
        height: auto;
        flex: none;

        @media (max-width: 768px) {
            width: 28px;
        }
    }
}

.reasons_chartImage {
    width: 100%;

    & img {
        width: 100%;
        height: auto;
    }
}

.reasons_photo {
    position: absolute;
    bottom: 0;
    z-index: 0;
    width: 348px;
    pointer-events: none;

    @media (max-width: 1024px) {
        width: 230px;
    }

    @media (max-width: 768px) {
        width: 183px;
        max-width: 49%;
    }

    & img {
        width: 100%;
        height: auto;
    }
}

.reasons_photo-dog {
    left: 0;
}

.reasons_photo-cat {
    right: 0;
}

/* --- 03_デンタルケア --- */

.reasons_item-03 {
    background: linear-gradient(0deg, #F5F5F5 4%, #FFFFFF 98.27%);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 40px;

    /* カード内幅303pxを確保するため左右20px */
    @media (max-width: 768px) {
        padding: 40px 20px;
        align-items: flex-start;
        gap: 16px;
    }
}

.reasons_dentalBadges {
    display: flex;
    align-items: flex-start;
    justify-content: center;
    gap: 16px;

    @media (max-width: 768px) {
        width: 100%;
        gap: 9px;
        margin-top: 8px;
    }

    & img {
        width: 145px;
        height: auto;

        @media (max-width: 768px) {
            width: 83px;
        }

        &:last-child {
            width: 140px;

            @media (max-width: 768px) {
                width: 81px;
            }
        }
    }
}

.reasons_dentalCard {
    width: 100%;
    max-width: 600px;
    padding: 24px;
    position: relative;
    border: 1px solid var(--cta-blue);
    border-radius: 16px;
    background: var(--white);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;

    @media (max-width: 768px) {
        align-self: center;
        padding: 16px;
        gap: 8px;
    }
}

.reasons_dentalMain {
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;

    @media (max-width: 768px) {
        width: 100%;
        gap: 8px;
    }
}

.reasons_dentalTitle {
    font-size: 20px;
    font-weight: var(--bold);
    line-height: var(--line-150);
    text-align: center;

    @media (max-width: 768px) {
        font-size: 16px;
    }
}

.reasons_dentalFlow {
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.reasons_dentalDiagram {
    width: 100%;

    & img {
        width: 100%;
        height: auto;
    }
}

.reasons_dentalArrow {
    width: 57px;
    height: 15px;
    background: #36393D;
    clip-path: polygon(0 0, 100% 0, 50% 100%);

    @media (max-width: 768px) {
        width: 33px;
        height: 10px;
    }
}

.reasons_dentalNote {
    width: 555px;
    max-width: 100%;
    padding: 8px;
    border-radius: 6px;
    background: var(--cta-blue);
    display: flex;
    align-items: center;
    gap: 6px;
    color: var(--white);
    font-size: var(--font-s);
    font-weight: var(--bold);
    line-height: var(--line-150);

    @media (max-width: 768px) {
        width: 100%;
        gap: 8px;
        font-size: 14px;
    }

    & img {
        width: 22px;
        height: auto;
        flex: none;

        @media (max-width: 768px) {
            width: 16px;
            margin-top: 2px;
        }
    }
}

.reasons_dentalCat {
    position: absolute;
    right: 29px;
    bottom: 24px;
    width: 80px;
    height: auto;

    @media (max-width: 768px) {
        right: 19px;
        bottom: 16px;
        width: 68px;
    }
}

/* --- 04_健康設計 --- */

.reasons_item-04 {
    background: linear-gradient(0deg, #F5F5F5 4%, #FFFFFF 98.27%);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 40px;

    @media (max-width: 768px) {
        align-items: flex-start;
        gap: 32px;
    }
}

.reasons_health {
    width: 100%;
    max-width: 590px;
    margin-inline: auto;
    display: flex;
    flex-direction: column;
    gap: 16px;

    /* SPは横幅なりに3列で折り返す（4列目は入らない） */
    @media (max-width: 768px) {
        max-width: none;
    }
}

.reasons_healthList {
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 16px;

    @media (max-width: 768px) {
        gap: 16px 20px;
    }
}

.reasons_healthItem {
    width: 104px;
    min-width: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4.6px;

    @media (max-width: 768px) {
        width: 80px;
        gap: 5px;
    }

    & img {
        width: 104px;
        height: auto;

        @media (max-width: 768px) {
            width: 80px;
        }
    }

    & p {
        font-size: var(--font-s);
        font-weight: var(--bold);
        line-height: var(--line-150);
        text-align: center;
        white-space: nowrap;

        @media (max-width: 768px) {
            font-size: 14px;
        }
    }

    & .reasons_note {
        align-self: auto;
        vertical-align: super;
    }
}

/* --- 04_区切り画像（SPのみ） --- */

.reasons_divider {
    width: 100%;
    height: 450px;

    @media (max-width: 1024px) {
        height: 300px;
    }

    @media (max-width: 768px) {
        height: 175px;
    }

    & img {
        width: 100%;
        height: 100%;
        object-fit: cover;
    }
}

/* ===== FAQ ＋ もっと詳しく知りたい方へ ===== */

.faq {
    width: 100%;
    padding: 0 40px 80px;
    background: var(--white);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 80px;

    @media (max-width: 768px) {
        padding: 40px 24px;
        gap: 40px;
    }
}

.faq_inner {
    width: 100%;
    max-width: 800px;
    padding: 40px;
    border-radius: 16px;
    background: #F0F2F2;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 40px;

    @media (max-width: 768px) {
        padding: 24px;
        gap: 16px;
    }
}

.faq_title {
    width: 100%;
    font-size: var(--font-m);
    font-weight: var(--bold);
    line-height: var(--line-150);
    text-align: center;
}

.faq_list {
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: 24px;

    @media (max-width: 768px) {
        gap: 16px;
    }
}

.faq_item {
    padding: 40px;
    border-radius: 18.5px;
    background: var(--white);
    display: flex;
    flex-direction: column;
    gap: 18.5px;

    @media (max-width: 768px) {
        padding: 32px;
        border-radius: 16px;
    }
}

.faq_q,
.faq_a {
    display: flex;
    align-items: center;
    gap: 9.3px;
    font-size: var(--font-s);
    font-weight: var(--medium);
    line-height: var(--line-150);
}

.faq_q {
    padding-bottom: 18.5px;
    border-bottom: 1.16px dashed #B3B3B3;
}

.faq_badge {
    width: 32px;
    height: 32px;
    flex: none;
    border-radius: 50%;
    display: grid;
    place-items: center;
    color: var(--white);
    font-size: 18.56px;
    font-weight: var(--bold);
    line-height: var(--line-150);

    @media (max-width: 768px) {
        width: 28px;
        height: 28px;
        font-size: 16.24px;
    }
}

.faq_badge-q {
    background: var(--dark-blue);
}

.faq_badge-a {
    background: var(--main);
}

/* --- もっと詳しく知りたい方へ --- */

.more {
    width: 100%;
    display: flex;
    justify-content: center;
}

/*
 * 写真の上に白グラデを重ねてコピー側を抜く。PCは横方向、SPは縦方向。
 * 写真はカンプ独自の拡大トリミングなので、PC(800x287)/SP(327x377)の
 * 比率どおりに書き出した専用画像を使い、100% 100% でそのまま敷く。
 */
.more_inner {
    width: 100%;
    max-width: 800px;
    aspect-ratio: 800 / 287;
    padding: 40px;
    border: 1px solid var(--hpm-gray);
    border-radius: 8px;
    background:
        linear-gradient(-86.38deg, rgba(255, 255, 255, 0.00) 26.29%, rgba(255, 255, 255, 0.70) 38.03%, var(--white) 52.5%),
        url(../images/more_bg_pc.jpg) no-repeat center / cover;

    @media (max-width: 768px) {
        max-width: 327px;
        aspect-ratio: 327 / 377;
        padding: 32px 24px;
        display: flex;
        align-items: flex-end;
        background:
            linear-gradient(178deg, rgba(255, 255, 255, 0.00) 30.11%, rgba(255, 255, 255, 0.90) 47.59%, var(--white) 65.66%),
            url(../images/more_bg_sp.jpg) no-repeat center / 100% 100%;
    }
}

.more_body {
    display: flex;
    align-items: center;
    gap: 16px;
}

.more_text {
    width: 217px;
    display: flex;
    flex-direction: column;
    gap: 16px;

    @media (max-width: 768px) {
        width: auto;
        gap: 13.2px;
    }
}

.more_head {
    display: flex;
    flex-direction: column;
    gap: 10px;

    @media (max-width: 768px) {
        gap: 8.3px;
    }
}

.more_lead {
    font-size: var(--font-s);
    font-weight: var(--bold);
    line-height: var(--line-150);
    white-space: nowrap;

    @media (max-width: 768px) {
        font-size: 12px;
        line-height: var(--line-130);
    }
}

.more_catch {
    font-size: var(--font-m);
    font-weight: var(--bold);
    line-height: var(--line-150);
    color: var(--main);
    white-space: nowrap;
}

.more_black {
    color: var(--dark-blue);
}

.more_button {
    width: 100%;
    padding: 16px 24px 17px;
    border-radius: 60px;
    background: var(--dark-blue);
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    color: var(--white);
    font-size: 14px;
    font-weight: var(--bold);
    line-height: var(--line-130);
    white-space: nowrap;
    transition: background-color .35s ease;

    @media (max-width: 768px) {
        font-size: 12px;
        width: 150px;
        padding: 8px 12px 8px 17px;
        border-radius: 49.6px;
        gap: 8.3px;
    }

    @media (any-hover: hover) {
        &:hover {
            background-color: #1d3d5c;
        }
    }

    & img {
        width: 20px;
        height: auto;
        flex: none;

        @media (max-width: 768px) {
            width: 17px;
        }
    }
}

.more_products {
    width: 160px;
    flex: none;
    display: flex;
    flex-direction: column;
    gap: 16px;

    @media (max-width: 768px) {
        width: 112px;
        gap: 11.2px;
    }
}

.more_logo {
    width: 115px;
    height: auto;

    @media (max-width: 768px) {
        width: 80px;
    }
}

.more_bags {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

/* デザイン通りパッケージ画像を中央寄りにトリミングして使う */
.more_bag {
    width: 80px;
    height: 138px;
    flex: none;
    position: relative;
    overflow: hidden;
    box-shadow: 0 3.489px 9.969px -7.975px rgba(0, 0, 0, 0.20);

    @media (max-width: 768px) {
        width: 56px;
        height: 97px;
        box-shadow: 0 2.443px 6.98px -5.584px rgba(0, 0, 0, 0.20);
    }

    & img {
        position: absolute;
        left: -40.63%;
        top: -4.69%;
        width: 181.25%;
        height: 104.69%;
        object-fit: cover;
    }
}

/* ===== サンプル選択（犬用・猫用） ===== */

.select {
    margin-top: -60px;
    width: 100%;
    padding: 40px 0 80px;
    background: linear-gradient(0deg, #F5F5F5 4%, #FFFFFF 98.27%);
    display: flex;
    flex-direction: column;
    align-items: center;

    /* タブレット幅では左右に余白を確保する（802pxのカードが画面端に接触するのを防ぐ） */
    @media (min-width: 769px) and (max-width: 1024px) {
        padding-inline: 40px;
    }

    @media (max-width: 768px) {
        padding: 24px 0 40px;
        margin-top: 0;
    }
}

.select_body {
    width: 802px;
    max-width: 100%;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 16px;

    @media (max-width: 768px) {
        width: 100%;
        padding-inline: 24px;
        align-items: stretch;
        gap: 8px;
    }
}

.select_group {
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
}

/* PCは見出しを写真の帯に重ね、カードに40px食い込ませる。SPは見出し→写真→カードの縦積み */
.select_head {
    width: 100%;
    height: 211px;
    margin-bottom: -40px;
    position: relative;

    @media (max-width: 768px) {
        height: auto;
        margin-bottom: 0;
        display: flex;
        flex-direction: column;
        align-items: center;
    }
}

.select_title {
    position: absolute;
    left: 50%;
    top: 40px;
    translate: -50% 0;
    font-size: var(--font-l);
    font-weight: var(--bold);
    line-height: var(--line-150);
    text-align: center;
    color: var(--main);
    white-space: nowrap;

    @media (max-width: 768px) {
        position: static;
        translate: none;
        order: -1;
        margin-bottom: 10px;
    }
}

.select_pets {
    @media (max-width: 768px) {
        width: 278px;
        margin-bottom: -80px;
        display: flex;
        align-items: flex-end;
    }
}

.select_pet {
    position: absolute;
    top: -8px;
    width: 234px;
    height: 282px;
    overflow: hidden;

    /* 802px 未満に縮む幅では、写真の位置とサイズを .select_head 基準の%に切り替える */
    @media (min-width: 769px) and (max-width: 1024px) {
        width: 29.18%;
        /* 234 / 802 */
        height: auto;
        aspect-ratio: 234 / 282;
    }

    /* 内側imgのトリミング基準をこの枠に保つため static にはしない */
    @media (max-width: 768px) {
        position: relative;
        top: auto;
        left: auto;
    }

    & img {
        position: absolute;
        max-width: none;
    }
}

.select_pet-dog {
    left: 71px;

    @media (min-width: 769px) and (max-width: 1024px) {
        left: 8.85%;
        /* 71 / 802 */
    }

    @media (max-width: 768px) {
        left: auto;
        width: 154px;
        height: 186px;
        margin-right: -20px;
    }

    & img {
        left: -5.68%;
        top: -4.03%;
        width: 111.23%;
        height: 108.7%;
    }
}

.select_pet-cat {
    left: 526px;

    @media (min-width: 769px) and (max-width: 1024px) {
        left: 65.59%;
        /* 526 / 802 */
    }

    @media (max-width: 768px) {
        left: auto;
        width: 153px;
        height: 185px;
    }

    & img {
        left: 0;
        top: -2.34%;
        width: 100%;
        height: 100%;
    }
}

.select_card {
    width: 100%;
    padding: 32px 40px;
    position: relative;
    border: 1px solid var(--sub);
    border-radius: 16px;
    background: var(--white);
    display: flex;
    justify-content: center;
    gap: 24px;

    @media (max-width: 670px) {
        max-width: 350px;
        padding: 24px 16px;
        border-color: #B3B3B3;
        flex-direction: column;
        align-items: center;
        gap: 16px;
    }
}

.select_item {
    width: 337px;
    display: flex;
    align-items: center;
    gap: 16px;

    @media (max-width: 768px) {
        width: 100%;
        gap: 8px;
    }

    /* 2件目の手前に区切り線。gapと合わせてカンプの24px＋線＋24pxを再現 */
    &:not(:first-child) {
        padding-left: 24px;
        border-left: 1px solid #F0F2F2;

        @media (max-width: 768px) {
            padding-left: 0;
            padding-top: 16px;
            border-left: 0;
            border-top: 1px solid #F0F2F2;
        }
    }
}

.select_bag {
    width: 120px;
    height: auto;
    object-fit: cover;

    @media (max-width: 1024px) {
        width: 100px;
    }
}

.select_detail {
    width: 192px;
    display: flex;
    flex-direction: column;
    gap: 18.5px;

    @media (max-width: 768px) {
        width: auto;
        flex: 1 1 0;
        min-width: 0;
        gap: 8px;
        padding-bottom: 18px;
    }
}

.select_info {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
}

.select_label {
    display: flex;
    align-items: center;
    gap: 5.8px;
    font-size: var(--font-s);
    font-weight: var(--bold);
    line-height: var(--line-150);
    white-space: nowrap;

    & img {
        width: 23px;
        height: 23px;
        flex: none;
    }
}

.select_label-dog {
    color: var(--cta-blue);
}

.select_label-cat {
    color: var(--cta-green);
}

.select_name {
    font-size: 12px;
    font-weight: var(--bold);
    line-height: var(--line-130);
    white-space: nowrap;
}

.select_size {
    padding: 4px 8px;
    border: 1px solid #36393D;
    border-radius: 4px;
    color: #36393D;
    font-size: 12px;
    font-weight: var(--bold);
    line-height: var(--line-130);
    white-space: nowrap;
}

.select_cart {
    cursor: pointer;
    width: 190px;
    padding: 8px 16px;
    border-radius: 9.3px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 9.3px;
    color: var(--white);
    font-size: var(--font-s);
    font-weight: var(--bold);
    line-height: var(--line-150);
    white-space: nowrap;
    transition: background-color .35s ease;

    @media (max-width: 768px) {
        width: auto;
        align-self: flex-start;
        gap: 8px;
    }
}

/* カートアイコン */
.select_cart::before {
    content: "";
    width: 22px;
    height: 21px;
    flex: none;
    background: url(../images/select_cart.png) no-repeat center / contain;
}

/* 矢印アイコン */
.select_cart::after {
    content: "";
    width: 23px;
    height: 23px;
    flex: none;
    background: no-repeat center / contain;
}

.select_cart-dog {
    background-color: var(--cta-blue);

    &::after {
        background-image: url(../images/arrow_dog.svg);
    }

    @media (any-hover: hover) {
        &:hover {
            background-color: #2C9BCC;
        }
    }
}

.select_cart-cat {
    background-color: var(--cta-green);

    &::after {
        background-image: url(../images/arrow_cat.svg);
    }

    @media (any-hover: hover) {
        &:hover {
            background-color: #9FC76F;
        }
    }
}

/* カート追加後 */
.select_cart:disabled {
    cursor: default;
    height: 40px;
    padding: 8px 16px;
    justify-content: center;
    background-color: var(--white);
    border: 1.16px solid currentColor;

    &::before,
    &::after {
        content: none;
    }
}

.select_cart-dog:disabled {
    color: var(--cta-blue);
}

.select_cart-cat:disabled {
    color: var(--cta-green);
}

.select_note {
    width: 100%;
    font-size: 12px;
    font-weight: var(--medium);
    line-height: var(--line-130);
    color: var(--hpm-gray);

    @media (max-width: 768px) {
        font-size: 10px;
        line-height: var(--line-150);
    }
}

.p-payment__wrap {
    padding: 70px 0;

    @media (max-width: 768px) {
        padding: 40px 0;
    }
}

.p-payment__note {
    width: 100%;
    max-width: 900px;
    padding: 0 50px;
    margin: 0 auto 40px;
    text-align: center;
    color: #ff0000;
    font-size: var(--font-s);
    font-weight: var(--medium);
    line-height: var(--line-150);

    @media (max-width: 768px) {
        font-size: 12px;
        line-height: var(--line-130);
        padding: 0 24px;
        margin: 0 auto 24px;
    }
}

.l-container {
    width: 100%;
    max-width: 1100px;
    padding: 0 50px;
    margin: 0 auto;
    position: relative;

    @media (max-width: 768px) {
        padding: 0 24px;
    }
}

.l-footer {
    width: 100%;
    min-width: 100%;
    position: relative;
    z-index: 1;
    padding: 90px 0 120px;
    background: #fff;

    @media screen and (max-width:960px) {
        padding: 45px 0 90px;
    }
}

.l-footer__contact {
    padding: 0 24px;
}

.l-footer__contactBox {
    border: 2px solid #004b9c;
    position: relative;
    padding: 30px;
    width: 600px;
    margin: 0 auto;

    @media screen and (max-width:960px) {
        padding: 30px 15px 15px;
        width: 100%;
    }
}

.l-footer__contactTitle {
    position: absolute;
    display: inline-block;
    top: -10px;
    left: 50%;
    -webkit-transform: translate(-50%, 0);
    transform: translate(-50%, 0);
    padding: 0 12px;
    line-height: 1;
    font-size: 16px;
    background: #fff;
    font-weight: 700;
    white-space: nowrap;
}

.l-footer__contactButtonWrap {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -ms-flex-pack: distribute;
    justify-content: space-around;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    margin: 0 auto;

    @media screen and (max-width:960px) {
        max-width: 100%;
    }
}

.l-footer__contactButton {
    width: 320px;
    display: inline-block;
    text-align: center;
    font-size: 18px;
    font-weight: 700;
    color: #fff;
    text-transform: uppercase;
    overflow: hidden;
    background: #004b9c;
    position: relative;
    line-height: 1.4;
    padding: 16px 40px;
    border: 1px solid #004b9c;
    border-radius: 5px;
    -webkit-box-shadow: 0 0 45px rgba(0, 0, 0, .1);
    box-shadow: 0 0 45px rgba(0, 0, 0, .1);
    transition: all .3s ease;

    @media (any-hover: hover) {
        &:hover {
            color: #004b9c;
            background: #fff;

            &::after {
                background: url(../images/common_ico_button-blue.svg) no-repeat center center;
                background-size: contain;
            }
        }
    }

    @media screen and (max-width:960px) {
        font-size: 15px;
        max-width: 100%;
        min-width: auto;
        width: 100%;
        padding: 15px 15px;
    }

}

.l-footer__contactButton::after {
    content: "";
    position: absolute;
    top: 50%;
    right: 20px;
    -webkit-transform: translate(0, -50%);
    transform: translate(0, -50%);
    background: url(../images/common_ico_button-white.svg) no-repeat center center;
    background-size: contain;
    width: 20px;
    height: 20px;
    -webkit-transition: all .3s ease;
    transition: all .3s ease;

    @media screen and (max-width:960px) {
        right: 10px;
        width: 15px;
        height: 15px;
    }
}

.l-footer__contactDestination {
    margin: 15px 0 0;
    text-align: center;
    font-size: 16px;
    font-weight: 700;
    line-height: 1.4;
}

.l-footer__contactTel {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    color: #004b9c;
    font-size: 24px;
    font-weight: 700;
    line-height: 1.4;
}

.l-footer__contactTel:before {
    content: "";
    background: url(../images/common_ico_tel.svg) no-repeat center center;
    background-size: contain;
    width: 20px;
    height: 20px;
    display: block;
    margin: 0 10px 0 0;
}

.l-footer__contactNote {
    text-align: center;
    font-size: 14px;
    line-height: 1.4;
}

.l-footer__logo {
    display: flex;
    justify-content: center;
}

.l-footer__logoLink {
    display: block;
    width: 125px;
}

.l-footer__logoLink img {
    width: 100%;
    height: auto;
}

.l-footer__section--logo {
    padding: 30px 0 10px;
}

.l-footer__section--links {
    padding: 20px 0;
}

.l-footer__links {
    text-align: center;
}

.l-footer__linksItem {
    display: inline-block;
    position: relative;
    padding: 0 15px;

    @media screen and (max-width:960px) {
        padding: 0 5px;
    }
}

.l-footer__linksItem:last-child {
    padding-right: 0;

    @media screen and (max-width:960px) {
        padding: 0 5px;
    }
}

.l-footer__linksItem:not(:last-child):after {
    content: "";
    position: absolute;
    top: 50%;
    right: 0;
    -webkit-transform: translate(0, -50%);
    transform: translate(0, -50%);
    width: 1px;
    height: 12px;
    background: #000;

    @media screen and (max-width:960px) {
        display: none;
    }
}

.l-footer__linksLink {
    color: #000;
    font-size: 16px;
    line-height: 1;

    @media screen and (max-width:960px) {
        font-size: 12px;
    }
}

.l-footer__linksLink:hover {
    color: #000;
}

.l-footer__section--copyright {
    padding: 0;
}

.l-footer__copyright {
    text-align: center;
    font-size: 14px;

    @media screen and (max-width:960px) {
        font-size: 12px;
    }
}

.floating {
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
    z-index: 100;
    translate: 0 100%;
    transition: translate .35s ease;
    background: var(--main);
    padding: 16px var(--spacing-2);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: var(--spacing-1);

    &.active {
        translate: 0;
    }

    @media (max-width: 768px) {
        padding: var(--spacing-1) var(--spacing-3);
    }
}

.floating_buttons {
    display: flex;
    align-items: stretch;
    gap: var(--spacing-3);

    @media (max-width: 768px) {
        width: 100%;
        gap: var(--spacing-1);
    }
}

.floating_button {
    padding: var(--spacing-1) 17px;
    border-radius: var(--rounded-m);
    display: flex;
    align-items: center;
    gap: var(--spacing-2);
    color: var(--white);
    position: relative;
    overflow: hidden;
    transition: background-color .35s ease;
    animation: ctaButtonPulse 2s ease-in-out infinite;

    /* 光沢 */
    &::after {
        content: "";
        position: absolute;
        top: 0;
        left: 0;
        width: 40%;
        height: 100%;
        pointer-events: none;
        background: linear-gradient(90deg,
                rgba(255, 255, 255, 0) 0%,
                rgba(255, 255, 255, .4) 50%,
                rgba(255, 255, 255, 0) 100%);
        transform: skewX(-20deg) translateX(-150%);
        animation: ctaButtonShine 2s ease-in-out infinite;
    }

    @media (max-width: 768px) {
        flex: 1 1 0;
        min-width: 0;
        justify-content: center;
        padding: var(--spacing-1);
        gap: var(--spacing-1);
    }

    @media (any-hover: hover) {
        &:hover {
            animation: none;

            &::after {
                animation: none;
            }
        }
    }
}

.floating_button-dog {
    background-color: var(--cta-blue);

    @media (any-hover: hover) {
        &:hover {
            background-color: #2C9BCC;
        }
    }
}

.floating_button-cat {
    background-color: var(--cta-green);

    @media (any-hover: hover) {
        &:hover {
            background-color: #9FC76F;
        }
    }
}

.floating_icon {
    width: 43px;
    height: 43px;
    flex: none;

    @media (max-width: 768px) {
        width: 20px;
        height: 20px;
    }
}

.floating_arrow {
    width: 30px;
    height: 30px;
    flex: none;

    @media (max-width: 768px) {
        width: 16px;
        height: 17px;
    }
}

.floating_text {
    font-size: 20px;
    font-weight: var(--bold);
    line-height: var(--line-150);
    white-space: nowrap;

    @media (max-width: 768px) {
        font-size: 12px;
        line-height: var(--line-130);
    }
}