/*
 * トップ構成・全ページヘッダー調整 v1.0.8
 * 既存テーマのカラー変数・コンテナ幅に合わせ、追加部分だけを共通コンポーネントとして定義します。
 */

.dwhl-header__biz-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 38px;
    padding: 9px 16px;
    border: 1px solid #2f8f75;
    border-radius: var(--dw-radius-pill, 999px);
    background: #f3faf7;
    color: #166b56;
    font-family: var(--dw-font-serif, serif);
    font-size: 0.76rem;
    font-weight: 600;
    letter-spacing: 0.015em;
    line-height: 1.25;
    text-align: center;
    white-space: nowrap;
    transition: background-color .2s ease, color .2s ease, transform .2s ease, box-shadow .2s ease;
}

.dwhl-header__biz-link:hover {
    background: #2f8f75;
    color: #fff;
    opacity: 1;
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(30, 116, 92, .2);
}

/*
 * Desktop header
 * The business-service link adds a third action at the right of the existing
 * global navigation. The theme's header container has a fixed maximum width,
 * so the compact desktop layout must remain in effect at every desktop width.
 * The existing mobile-menu breakpoint below 1351px remains unchanged.
 */
@media (min-width: 1351px) {
    .dw-header__inner {
        padding-right: 28px;
        padding-left: 28px;
    }

    .dw-header__logo-link {
        width: 11rem;
    }

    .dw-header__nav {
        min-width: 0;
        margin: 0 16px;
    }

    .dw-header__nav-list {
        gap: 12px;
        white-space: nowrap;
    }

    .dw-header__nav-item a {
        padding: 4px 0;
        font-size: 0.82rem;
        letter-spacing: 0;
        white-space: nowrap;
    }

    .dw-header__actions {
        gap: 10px;
    }

    .dw-header__actions .dw-header__cart-btn {
        gap: 6px;
        padding: 9px 14px;
        font-size: 0.75rem;
        line-height: 1.2;
        white-space: nowrap;
    }

    .dwhl-header__biz-link {
        min-height: 36px;
        padding: 8px 12px;
        font-size: 0.70rem;
    }
}

/*
 * PCサブメニューはテーマ側の左右paddingが0pxのため、
 * ドロップダウン本体に共通の内側余白を持たせます。
 * 項目の高さ・リンク先・開閉挙動は既存テーマのまま維持します。
 */
@media (min-width: 769px) {
    .dw-header__dropdown {
        padding: 8px 12px;
    }
}

.dwhl-diagnose-cta--moved {
    width: 100%;
    max-width: none;
    margin: 0;
    padding: clamp(58px, 6.4vw, 86px) max(24px, calc((100vw - var(--dw-container, 1200px)) / 2));
    border-radius: 0;
    background-image: url('images/dw-offer-bk04-expanded-v1.png');
    background-position: center center;
    background-repeat: no-repeat;
    background-size: cover;
}

.dwhl-diagnose-cta--moved .dw-diagnose-cta__inner {
    max-width: var(--dw-container, 1200px);
    min-height: 260px;
    padding: 0;
}

/*
 * The reordered TOP sequence alternates its surfaces:
 * TOPICS ends in white, featured products use soft gray, the diagnosis CTA
 * uses its image, WHY COLLAGEN is mist, REASON is white, product lineup
 * returns to soft gray, and VOICE is white. The scope marker is added only
 * after all required TOP sections have been found and ordered.
 */
.dwhl-top-layout--ordered .dw-products--featured {
    background: #f9fafb;
}

.dwhl-top-layout--ordered .dw-reason {
    background: #fff;
}

.dwhl-why-collagen {
    padding: clamp(76px, 9vw, 128px) 24px;
    background: #f8faf9;
    color: var(--dw-navy, #162b4d);
}

.dwhl-why-collagen__container {
    width: 100%;
    max-width: var(--dw-container, 1200px);
    margin: 0 auto;
}

.dwhl-why-collagen__heading {
    max-width: 740px;
    margin: 0 auto clamp(40px, 5vw, 70px);
    text-align: center;
}

.dwhl-why-collagen__eyebrow,
.dwhl-why-collagen__number {
    margin: 0;
    color: var(--dw-gold, #c29b4c);
    font-family: var(--dw-font-serif, serif);
    font-weight: 600;
    letter-spacing: .15em;
}

.dwhl-why-collagen__eyebrow {
    font-size: .82rem;
}

.dwhl-why-collagen__title {
    margin: 13px 0 10px;
    font-family: var(--dw-font-serif, serif);
    font-size: clamp(1.45rem, 2.05vw, 1.75rem);
    font-weight: 600;
    letter-spacing: .035em;
    line-height: 1.35;
}

.dwhl-why-collagen__lead {
    margin: 0;
    color: var(--dw-gray-600, #5e6674);
    font-size: clamp(.92rem, 1.2vw, 1.06rem);
    line-height: 1.9;
}

.dwhl-why-collagen__grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: clamp(22px, 3.5vw, 46px);
}

.dwhl-why-collagen__card {
    display: grid;
    grid-template-rows: auto 1fr;
    min-width: 0;
    overflow: hidden;
    border: 1px solid rgba(22, 43, 77, .1);
    background: #fff;
    box-shadow: 0 14px 36px rgba(23, 45, 76, .055);
}

.dwhl-why-collagen__copy {
    padding: clamp(24px, 3.1vw, 44px) clamp(24px, 3.4vw, 48px) 20px;
}

.dwhl-why-collagen__number {
    font-size: .84rem;
}

.dwhl-why-collagen__card-title {
    margin: 10px 0 12px;
    font-family: var(--dw-font-serif, serif);
    font-size: clamp(1.25rem, 1.8vw, 1.7rem);
    font-weight: 600;
    line-height: 1.5;
}

.dwhl-why-collagen__text {
    margin: 0;
    color: var(--dw-gray-600, #5e6674);
    font-size: .93rem;
    line-height: 1.9;
}

.dwhl-why-collagen__media {
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 clamp(24px, 3.4vw, 48px) clamp(26px, 3.4vw, 40px);
    padding-top: clamp(16px, 2vw, 28px);
    border-top: 1px solid rgba(22, 43, 77, .08);
    background: #fff;
}

.dwhl-why-collagen__image {
    display: block;
    width: min(100%, 460px);
    height: auto;
    background: #fff;
    object-fit: contain;
}

.dwhl-why-collagen__final {
    display: grid;
    grid-column: 1 / -1;
    grid-template-columns: minmax(0, 1.2fr) minmax(0, 2fr) auto;
    gap: 24px;
    align-items: center;
    padding: clamp(30px, 4vw, 56px);
    border-top: 3px solid var(--dw-gold, #c29b4c);
    background: var(--dw-navy, #162b4d);
    color: #fff;
}

.dwhl-why-collagen__final .dwhl-why-collagen__number {
    color: #e0c485;
}

.dwhl-why-collagen__final-heading {
    min-width: 0;
}

.dwhl-why-collagen__final-title {
    margin: 8px 0 0;
    font-family: var(--dw-font-serif, serif);
    font-size: clamp(1.25rem, 2.1vw, 1.85rem);
    font-weight: 600;
    line-height: 1.45;
}

.dwhl-why-collagen__final-text {
    margin: 0;
    color: rgba(255, 255, 255, .87);
    font-size: .95rem;
    line-height: 1.9;
}

.dwhl-why-collagen__link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    padding: 14px 20px;
    border: 1px solid #d9bb75;
    background: #d9bb75;
    color: var(--dw-navy, #162b4d);
    font-family: var(--dw-font-serif, serif);
    font-size: .9rem;
    font-weight: 600;
    line-height: 1.35;
    text-align: center;
    white-space: nowrap;
    transition: background-color .2s ease, border-color .2s ease, transform .2s ease;
}

.dwhl-why-collagen__link:hover {
    border-color: #f3dfae;
    background: #f3dfae;
    color: var(--dw-navy, #162b4d);
    opacity: 1;
    transform: translateY(-1px);
}

.dwhl-why-collagen__arrow {
    font-size: 1.15em;
}

@media (max-width: 1350px) {
    .dwhl-header__biz-link {
        display: none;
    }
}

@media (max-width: 767px) {
    .dwhl-diagnose-cta--moved {
        padding: 56px 24px;
        background-position: 70% center;
    }

    .dwhl-diagnose-cta--moved .dw-diagnose-cta__inner {
        min-height: 0;
    }

    .dwhl-why-collagen {
        padding: 68px 16px;
    }

    .dwhl-why-collagen__grid {
        grid-template-columns: 1fr;
        gap: 20px;
    }

    .dwhl-why-collagen__copy {
        padding: 28px 24px 18px;
    }

    .dwhl-why-collagen__media {
        margin: 0 24px 28px;
        padding-top: 18px;
    }

    .dwhl-why-collagen__image {
        width: 100%;
    }

    .dwhl-why-collagen__final {
        grid-column: auto;
        grid-template-columns: 1fr;
        gap: 16px;
        padding: 32px 24px;
    }

    .dwhl-why-collagen__link {
        width: 100%;
        white-space: normal;
    }

    .dwhl-mobile-menu__biz-link {
        border: 1px solid #2f8f75;
        background: #eff9f5;
        color: #166b56;
    }
}