/* ===========================================
   DOGS LP
   SP-first / breakpoint: 768px
=========================================== */

/* -------------------------------------------
   Variables
------------------------------------------- */
:root {
    --color-bg: #f7f4e9;
    --color-bg-tan: #bca389;
    --color-bg-dark: #2a1c12;
    --color-text: #776755;
    --color-text-sub: #776755;
    --color-border: #776755;
    --color-dot: #bca389;
    --color-dot-active: #2a1f14;

    --pad-sp: 30px;
    --pad-pc: 40px;
    --max-w: 960px;
}

/* -------------------------------------------
   CMS overrides
------------------------------------------- */
.pane-contents {
    padding-bottom: 0 !important;
}

.pane-footer {
    margin-top: 0 !important;
}

/* -------------------------------------------
   改行出し分け
------------------------------------------- */
.br-pc {
    display: none;
}

/* -------------------------------------------
   KV
------------------------------------------- */
.dogs-kv {
    position: relative;
    background-image: url('/img/usr/freepage/202607_tss_dogs/sp/top.webp');
    background-size: cover;
    background-position: center;
    aspect-ratio: 751 / 890;
}

.dogs-kv__inner {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    padding: 20px 0 0;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.dogs-kv__brand {
    width: 28%;
    margin: 0;
}

.dogs-kv__brand img {
    display: block;
    width: 100%;
    height: auto;
}

.dogs-kv__logo {
    width: 72%;
    margin-top: 17px;
    line-height: 0;
}

.dogs-kv__logo img {
    display: block;
    width: 100%;
    height: auto;
}

.dogs-kv__subtitle {
    font-size: 4vw;
    font-weight: 600;
    letter-spacing: 0;
    color: #ffffff;
    text-align: center;
    white-space: nowrap;
    margin-top: 15px;
}

/* -------------------------------------------
   バッジ
------------------------------------------- */
.dogs-badge {
    display: block;
    background-color: var(--color-bg);
    text-align: center;
    padding: 18px var(--pad-sp);
    margin: 0;
    letter-spacing: 0.06em;
}

.dogs-badge span {
    display: block;
    border: 1px solid var(--color-border);
    border-radius: 999px;
    padding: 5px;
    font-size: 0.9rem;
    font-weight: 500;
    color: var(--color-text-sub);
    background-color: #ffffff;
    text-decoration: none;
    cursor: default;
}

/* -------------------------------------------
   イントロ
------------------------------------------- */
.dogs-intro {
    background-color: var(--color-bg);
}

.dogs-intro__inner {
    padding: 10px var(--pad-sp);
}

.dogs-intro__heading {
    font-size: 1.25rem;
    font-weight: 500;
    color: var(--color-text-sub);
    background: none;
    text-align: center;
    margin: 0;
    padding: 0;
    letter-spacing: 0.06em;
}

.dogs-intro__text {
    font-size: 1rem;
    line-height: 1.7;
    color: var(--color-text-sub);
    margin-top: 10px;
}

/* -------------------------------------------
   商品セクション共通
------------------------------------------- */
.dogs-product {
    background-color: var(--color-bg);
}

.dogs-product--large {
    background-color: var(--color-bg-tan);
    color: var(--color-bg-dark);
    --color-bg: var(--color-bg-tan);
    --color-text: var(--color-bg-dark);
    --color-text-sub: var(--color-bg-dark);
    --color-border: var(--color-bg-dark);
    --color-dot: rgba(42, 28, 18, 0.3);
    --color-dot-active: #2a1c12;
}

.dogs-product__inner {
    padding: 20px 0 60px;
}

/* --- ヘッダー（SVG見出し + サブテキスト） --- */
.dogs-product__head {
    padding: 0;
}

.dogs-script {
    margin: 0;
    padding: 0;
    line-height: 0;
    background: none;
}

.dogs-script img {
    display: block;
    width: 100%;
    height: auto;
}

.dogs-script-sub {
    font-size: 1.25rem;
    font-weight: 600;
    text-align: center;
    letter-spacing: 1px;
    color: var(--color-text-sub);
    padding: 0 var(--pad-sp);
    line-height: 1;
    margin: 0;
}

/* --- スライダー --- */
.dogs-product__media {
    padding: 0 20px;
}

.dogs-product__body {
    display: flex;
    flex-direction: column;
    margin-top: 20px;
}

.dogs-product__body>.dogs-product__desc {
    order: 1;
}

.dogs-product__body>picture,
.dogs-product__body>.dogs-product__illust {
    order: 2;
}

.dogs-product__detail {
    order: 3;
    padding: 16px var(--pad-sp) 0;
}

.dogs-slider {
    position: relative;
    overflow: hidden;
}

.dogs-slider::before {
    content: '';
    display: block;
    padding-top: calc(761 / 657 * 100%);
}

.dogs-slider__viewport {
    position: absolute;
    left: 8.4%;
    top: 5%;
    right: 5.9%;
    bottom: 4.9%;
    overflow: hidden;
}

.dogs-slider__track {
    display: flex;
    height: 100%;
    transition: transform 0.35s ease;
}

.dogs-slider__slide {
    flex-shrink: 0;
    width: 100%;
    height: 100%;
}

.dogs-slider__img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.dogs-slider__frame {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 1;
}

.dogs-product--large .dogs-slider__frame {
    filter: brightness(0);
}

.dogs-slider__next {
    position: absolute;
    top: 50%;
    right: 40px;
    transform: translateY(-50%);
    background: none;
    border: none;
    padding: 0;
    cursor: pointer;
    width: 60px;
    z-index: 2;
}

.dogs-slider__next-label {
    display: none;
}

.dogs-slider__next-icon {
    display: block;
    width: 100%;
    height: auto;
}

.dogs-dots {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 5px;
    padding: 0 0 5px;
}

.dogs-dot {
    display: block;
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background-color: var(--color-dot);
    opacity: 0.45;
}

.dogs-dot--active {
    background-color: var(--color-dot-active);
    opacity: 1;
}

/* --- 商品情報 --- */
.dogs-product__illust {
    display: block;
    width: 100%;
    max-width: none;
    margin-left: 0;
    height: auto;
}

.dogs-product__name {
    font-size: 1rem;
    font-weight: 600;
    line-height: 1.5;
    color: var(--color-text);
    text-align: center;
    margin: 0;
}

.dogs-product__sku {
    font-size: 0.875rem;
    color: var(--color-text-sub);
    font-weight: 600;
}

.dogs-product__price {
    font-size: 1rem;
    font-weight: 600;
    color: var(--color-text);
    text-align: center;
    margin-top: 7px;
}

/* --- 購入ボタン --- */
.dogs-btn {
    display: block;
    width: 90%;
    margin: 30px auto 0;
    padding: 20px 0;
    background-color: #ffffff;
    color: var(--color-text-sub);
    border: 2px solid var(--color-border);
    border-radius: 999px;
    font-size: 1.4rem;
    font-weight: 600;
    letter-spacing: 0.12em;
    text-align: center;
    text-decoration: none;
    box-sizing: border-box;
}

.dogs-btn:hover,
.dogs-btn:focus {
    opacity: 0.8;
    color: var(--color-text-sub);
    text-decoration: none;
}

/* --- 説明文 --- */
.dogs-product__desc {
    padding: 16px var(--pad-sp) 0;
    font-size: 1rem;
    line-height: 1.7;
    color: var(--color-text-sub);
    margin: 0;
}

/* -------------------------------------------
   Features
------------------------------------------- */
.dogs-features {
    background-color: var(--color-bg);
    background-image: url('/img/usr/freepage/202607_tss_dogs/sp/featbg.svg');
    background-repeat: no-repeat;
    background-size: 100% auto;
    background-position: center 90%;
    --color-text: #2a1c12;
    --color-text-sub: #2a1c12;
}

.dogs-features__inner {
    padding: 44px var(--pad-sp) 52px;
}

.dogs-features__head .dogs-script {
    margin-left: calc(var(--pad-sp) * -1);
    margin-right: calc(var(--pad-sp) * -1);
}

.dogs-features__list {
    list-style: none;
    margin-top: 30px;
    padding: 0;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 25px 5px;
}

.dogs-features__list .dogs-feature:nth-child(5) {
    grid-column: 1 / -1;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.dogs-features__list .dogs-feature:nth-child(5) .dogs-feature__icon {
    width: calc((100% - 5px) / 2);
    margin: 0 0 0;
}

.dogs-features__list .dogs-feature:nth-child(5) .dogs-feature__name,
.dogs-features__list .dogs-feature:nth-child(5) .dogs-feature__note {
    width: 70%;
}

.dogs-feature {
    text-align: center;
}

.dogs-feature__icon {
    display: block;
    width: 100%;
    height: auto;
    margin: 0;
    padding: 0 10px;
}

.dogs-feature__name {
    font-size: clamp(0.725rem, 0.35rem + 1.88vw, 1.25rem);
    font-weight: 600;
    color: var(--color-text);
    margin-top: 10px;
    line-height: 1.5;
}

.dogs-feature__note {
    font-size: clamp(0.6rem, 0.386rem + 1.07vw, 0.9rem);
    color: var(--color-text-sub);
    line-height: 1.4;
    margin-top: 5px;
}

/* -------------------------------------------
   Snap
------------------------------------------- */
.dogs-snap {
    background-color: #f6fbf2;
    --color-text: #2a1c12;
    --color-text-sub: #2a1c12;
}

.dogs-snap__inner {
    padding: 25px 0 52px;
}

.dogs-snap__head .dogs-script {
    margin-left: calc(var(--pad-sp) * -1);
    margin-right: calc(var(--pad-sp) * -1);
}

.dogs-snap__head {
    margin-left: var(--pad-sp);
    margin-right: var(--pad-sp);
}

.dogs-snap .dogs-script-sub,
.dogs-product--large .dogs-script-sub {
    margin-top: -12px;
}

.dogs-snap__text {
    font-size: 0.9rem;
    line-height: 1.8;
    color: var(--color-text-sub);
    margin: 16px var(--pad-sp) 0;
}

.dogs-snap__grid {
    list-style: none;
    margin-top: 24px;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 10px;
}

.dogs-snap__photo {
    display: block;
    width: 100%;
    aspect-ratio: 1 / 1;
    object-fit: cover;
    background-color: #c8c8c8;
}

/* -------------------------------------------
   Pick up
------------------------------------------- */
.dogs-pickup {
    background-color: #f8f8f8;
    --color-text: #2a1c12;
    --color-text-sub: #2a1c12;
}

.dogs-pickup__inner {
    padding: 44px var(--pad-sp) 52px;
    text-align: center;
}

.dogs-pickup__head .dogs-script {
    margin-left: calc(var(--pad-sp) * -1);
    margin-right: calc(var(--pad-sp) * -1);
}

.dogs-pickup__text {
    font-size: 0.875rem;
    color: var(--color-text-sub);
    margin-top: 12px;
}

.dogs-pickup__inner>a {
    display: block;
    margin-top: 20px;
}

.dogs-pickup__img {
    border: 1px solid #ddd;
    display: block;
    width: 100%;
    height: auto;
}


/* ===========================================
   PC (768px以上)
=========================================== */
@media (min-width: 768px) {

    .br-sp {
        display: none;
    }

    .br-pc {
        display: inline;
    }

    /* KV */
    .dogs-kv {
        background-image: url('/img/usr/freepage/202607_tss_dogs/pc/top_pc.webp');
        aspect-ratio: 981 / 550;
    }

    .dogs-kv__inner {
        right: auto;
        width: 53%;
        top: 40%;
        transform: translateY(-50%);
        padding: 0 0 0 min(calc((100% - var(--max-w)) / 2 + var(--pad-pc)), 160px);
        align-items: flex-start;
    }

    .dogs-kv__brand {
        align-self: center;
        width: 35%;
    }

    .dogs-kv__logo {
        width: 100%;
        margin-top: 30px;
    }

    .dogs-kv__subtitle {
        font-size: clamp(14px, 1.95vw, 24px);
        white-space: nowrap;
        margin: 30px auto 0;
    }

    /* バッジ */
    .dogs-badge {
        padding: 32px var(--pad-pc);
    }

    .dogs-badge span {
        max-width: calc((var(--max-w) - var(--pad-pc) * 2) * 1 / 2);
        margin: 0 auto;
        font-size: 1.375rem;
        padding: 12px;
        font-weight: 600;
        border: 2px solid var(--color-border);
    }

    /* イントロ */
    .dogs-intro__inner {
        max-width: var(--max-w);
        margin: 0 auto;
        padding: 56px var(--pad-pc) 64px;
    }

    .dogs-intro__heading {
        font-size: 1.6rem;
        font-weight: 600;
    }

    .dogs-intro__text {
        font-size: 1.25rem;
    }

    /* 商品セクション */
    .dogs-product__inner {
        max-width: var(--max-w);
        margin: 0 auto;
        padding: 64px var(--pad-pc) 72px;
    }

    .dogs-product__body {
        display: grid;
        grid-template-columns: 11fr 9fr;
        grid-template-rows: 9fr 11fr auto;
        column-gap: 40px;
        align-items: start;
        margin-top: 32px;
    }

    .dogs-product__media {
        padding: 0;
        grid-column: 1;
        grid-row: 1 / 3;
    }

    .dogs-product__detail {
        grid-column: 2;
        grid-row: 1;
        display: flex;
        flex-direction: column;
        padding: 20px 0 0;
    }

    .dogs-product__body>.dogs-product__desc {
        grid-column: 2;
        grid-row: 2;
        padding: 0;
        font-size: 1.1rem;
    }

    .dogs-product__body>picture,
    .dogs-product__body>.dogs-product__illust {
        grid-column: 1 / -1;
        grid-row: 3;
        display: block;
        width: 100%;
        max-width: none;
        margin-top: 40px;
        margin-left: 0;
    }

    .dogs-product__name {
        order: 1;
        font-size: 1.25rem;
    }

    .dogs-product__sku {
        font-size: 1rem;
    }

    .dogs-product__price {
        order: 2;
        font-size: 1.25rem;
    }

    .dogs-btn {
        order: 3;
        width: 100%;
    }

    /* スライダー次へボタン（PC: テキスト表示） */
    .dogs-slider__next {
        top: auto;
        bottom: 6%;
        right: 7%;
        transform: none;
        width: auto;
    }

    .dogs-slider__next-label {
        display: block;
        font-family: var(--font-body);
        font-size: 0.875rem;
        font-weight: 700;
        color: var(--color-text);
        white-space: nowrap;
        background-color: var(--color-bg);
        padding: 0 10px;
        line-height: 1.5rem;
        display: flex;
        align-items: center;
    }

    .dogs-slider__next-label::after {
        content: '';
        margin-left: 0.5em;
        background: var(--color-text);
        width: calc(sin(45deg) * 1em);
        height: 1em;
        display: inline-block;
        clip-path: polygon(0 0, 100% 50%, 0 100%);
    }

    .dogs-slider__next-icon {
        display: none;
    }

    .dogs-product--large .dogs-slider__next-label {
        background-color: var(--color-bg-dark);
        color: #ffffff;
    }

    .dogs-product--large .dogs-slider__next-label::after {
        background: #fff;
    }

    /* 見出しSVGのネガティブマージンをPCでリセット */
    .dogs-features__head .dogs-script,
    .dogs-snap__head .dogs-script,
    .dogs-pickup__head .dogs-script {
        margin-left: 0;
        margin-right: 0;
    }

    /* Features */
    .dogs-features {
        background-image: none;
    }

    .dogs-features__inner {
        max-width: var(--max-w);
        margin: 0 auto;
        padding: 72px var(--pad-pc) 80px;
        position: relative;
        isolation: isolate;
    }

    .dogs-features__inner::before {
        content: '';
        position: absolute;
        width: 109%;
        aspect-ratio: 890 / 602;
        background-image: url('/img/usr/freepage/202607_tss_dogs/pc/featbg.svg');
        background-size: contain;
        background-repeat: no-repeat;
        background-position: center;
        left: 50%;
        transform: translateX(-50%);
        bottom: 9%;
        z-index: -1;
    }

    .dogs-features__list {
        grid-template-columns: repeat(6, 1fr);
        gap: 40px 0;
        margin-top: 40px;
    }

    .dogs-feature {
        grid-column: span 2;
    }

    .dogs-features__list .dogs-feature:nth-child(4) {
        grid-column: 2 / 4;
    }

    .dogs-features__list .dogs-feature:nth-child(5) {
        grid-column: 4 / 6;
        display: block;
        align-items: initial;
    }

    .dogs-features__list .dogs-feature:nth-child(5) .dogs-feature__icon {
        width: 260px;
        margin: 0 auto;
    }

    .dogs-features__list .dogs-feature:nth-child(5) .dogs-feature__name,
    .dogs-features__list .dogs-feature:nth-child(5) .dogs-feature__note {
        width: auto;
    }

    .dogs-feature__icon {
        width: 260px;
        height: auto;
        padding: 0;
        margin: 0 auto;
    }

    .dogs-feature__name {
        margin-top: 10px;
    }

    /* Snap */
    .dogs-snap .dogs-script-sub {
        margin-top: -24px;
    }

    .dogs-snap__text {
        font-size: 1.1rem;
        text-align: center;
        margin: 16px auto 0;
    }

    .dogs-snap__inner {
        margin: 0 auto;
        padding: 72px var(--pad-pc) 80px;
    }

    .dogs-snap__head {
        margin: 0 auto;
        max-width: var(--max-w);
    }

    .dogs-snap__grid {
        grid-template-columns: repeat(4, 1fr);
        gap: 15px;
    }

    /* Pick up */
    .dogs-pickup__inner {
        max-width: var(--max-w);
        margin: 0 auto;
        padding: 72px var(--pad-pc) 80px;
    }

    .dogs-pickup__text {
        font-size: 1.1rem;
    }

    .dogs-pickup__img {
        max-width: 680px;
        margin: 0 auto;
        display: block;
    }
}