@charset "UTF-8";

/*
 * だし漬の素 商品ページ専用CSS
 * 対象: /jp/mn/123520/index.php
 * 共通ヘッダー・フッターへ影響を与えないよう、
 * すべて #dashizuke-page 配下に限定しています。
 */

#dashizuke-page {
    --dashizuke-ivory: #f7f2e8;
    --dashizuke-white: #ffffff;
    --dashizuke-green: #244a3a;
    --dashizuke-green-light: #e8efe9;
    --dashizuke-brown: #624a34;
    --dashizuke-brown-dark: #3f3024;
    --dashizuke-beige: #dbcdb8;
    --dashizuke-gold: #a88755;
    --dashizuke-text: #332d28;
    --dashizuke-muted: #6f675f;
    --dashizuke-border: #ded5c8;
    --dashizuke-shadow: 0 16px 40px rgba(63, 48, 36, 0.10);
    color: var(--dashizuke-text);
    background: var(--dashizuke-white);
    font-family:
        "Hiragino Kaku Gothic ProN",
        "Yu Gothic",
        "Meiryo",
        sans-serif;
    line-height: 1.8;
    overflow: hidden;
}

#dashizuke-page * {
    box-sizing: border-box;
}

#dashizuke-page img {
    display: block;
    max-width: 100%;
    height: auto;
}

#dashizuke-page a {
    color: inherit;
}

#dashizuke-page .dashizuke-container {
    width: calc(100% - 40px);
    max-width: 1180px;
    margin: 0 auto;
}

#dashizuke-page .dashizuke-breadcrumb {
    padding: 15px 0;
    background: #fbfaf7;
    border-bottom: 1px solid var(--dashizuke-border);
}

#dashizuke-page .dashizuke-breadcrumb ol {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin: 0;
    padding: 0;
    list-style: none;
    color: var(--dashizuke-muted);
    font-size: 13px;
}

#dashizuke-page .dashizuke-breadcrumb li {
    display: flex;
    align-items: center;
}

#dashizuke-page .dashizuke-breadcrumb li:not(:last-child)::after {
    content: "›";
    margin-left: 8px;
    color: #a59b91;
}

#dashizuke-page .dashizuke-breadcrumb a {
    text-decoration: none;
}

#dashizuke-page .dashizuke-breadcrumb a:hover,
#dashizuke-page .dashizuke-breadcrumb a:focus {
    text-decoration: underline;
}

#dashizuke-page .dashizuke-hero {
    position: relative;
    padding: 74px 0 82px;
    background:
        radial-gradient(circle at 15% 15%, rgba(255, 255, 255, 0.95) 0, rgba(255, 255, 255, 0) 35%),
        linear-gradient(135deg, #f8f3e9 0%, #eee6d8 54%, #e4ebdf 100%);
}

#dashizuke-page .dashizuke-hero::after {
    content: "";
    position: absolute;
    right: -120px;
    bottom: -170px;
    width: 420px;
    height: 420px;
    border: 1px solid rgba(36, 74, 58, 0.12);
    border-radius: 50%;
}

#dashizuke-page .dashizuke-hero-inner {
    position: relative;
    z-index: 1;
    display: grid;
    grid-template-columns: minmax(0, 1.02fr) minmax(420px, 0.98fr);
    gap: 60px;
    align-items: center;
}

#dashizuke-page .dashizuke-eyebrow,
#dashizuke-page .dashizuke-section-kicker,
#dashizuke-page .dashizuke-mini-label {
    margin: 0 0 12px;
    color: var(--dashizuke-green);
    font-size: 14px;
    font-weight: 700;
    letter-spacing: 0.16em;
}

#dashizuke-page .dashizuke-hero h1 {
    margin: 0;
    color: var(--dashizuke-brown-dark);
    font-family:
        "Yu Mincho",
        "Hiragino Mincho ProN",
        serif;
    font-size: clamp(36px, 4.6vw, 64px);
    font-weight: 600;
    line-height: 1.38;
    letter-spacing: 0.03em;
}

#dashizuke-page .dashizuke-hero-text {
    max-width: 660px;
    margin: 28px 0 0;
    color: #514941;
    font-size: 17px;
    line-height: 2;
}

#dashizuke-page .dashizuke-hero-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 14px;
    margin-top: 34px;
}

#dashizuke-page .dashizuke-button {
    display: inline-flex;
    min-height: 52px;
    align-items: center;
    justify-content: center;
    padding: 12px 24px;
    border: 1px solid var(--dashizuke-green);
    border-radius: 999px;
    font-size: 15px;
    font-weight: 700;
    line-height: 1.4;
    text-align: center;
    text-decoration: none;
    transition:
        transform 0.2s ease,
        background-color 0.2s ease,
        color 0.2s ease,
        box-shadow 0.2s ease;
}

#dashizuke-page .dashizuke-button:hover,
#dashizuke-page .dashizuke-button:focus {
    transform: translateY(-2px);
    box-shadow: 0 8px 18px rgba(36, 74, 58, 0.16);
}

#dashizuke-page .dashizuke-button-primary {
    color: #fff;
    background: var(--dashizuke-green);
}

#dashizuke-page .dashizuke-button-secondary {
    color: var(--dashizuke-green);
    background: rgba(255, 255, 255, 0.72);
}

#dashizuke-page .dashizuke-hero-visual {
    position: relative;
    min-height: 510px;
}

#dashizuke-page .dashizuke-hero-photo {
    overflow: hidden;
    width: 88%;
    margin-left: auto;
    border-radius: 42px 8px 42px 8px;
    box-shadow: var(--dashizuke-shadow);
}

#dashizuke-page .dashizuke-hero-photo img {
    width: 100%;
    aspect-ratio: 4 / 3;
    object-fit: cover;
}

#dashizuke-page .dashizuke-package-card {
    position: absolute;
    left: 0;
    bottom: -24px;
    width: 185px;
    padding: 18px 16px 13px;
    border: 1px solid rgba(98, 74, 52, 0.12);
    border-radius: 10px;
    background: rgba(255, 255, 255, 0.94);
    box-shadow: 0 18px 36px rgba(63, 48, 36, 0.18);
    text-align: center;
}

#dashizuke-page .dashizuke-package-card img {
    width: 100%;
    max-height: 230px;
    object-fit: contain;
}

#dashizuke-page .dashizuke-package-card p {
    margin: 8px 0 0;
    color: var(--dashizuke-muted);
    font-size: 12px;
}

#dashizuke-page .dashizuke-feature,
#dashizuke-page .dashizuke-recipes,
#dashizuke-page .dashizuke-product-info {
    padding: 96px 0;
}

#dashizuke-page .dashizuke-section-heading {
    max-width: 760px;
    margin: 0 auto 44px;
    text-align: center;
}

#dashizuke-page .dashizuke-section-heading h2,
#dashizuke-page .dashizuke-recommend h2,
#dashizuke-page .dashizuke-caution h2,
#dashizuke-page .dashizuke-contact h2 {
    margin: 0;
    color: var(--dashizuke-brown-dark);
    font-family:
        "Yu Mincho",
        "Hiragino Mincho ProN",
        serif;
    font-size: clamp(30px, 3.5vw, 46px);
    font-weight: 600;
    line-height: 1.45;
    letter-spacing: 0.03em;
}

#dashizuke-page .dashizuke-section-heading > p:last-child {
    margin: 18px auto 0;
    color: var(--dashizuke-muted);
    font-size: 16px;
}

#dashizuke-page .dashizuke-feature-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 24px;
}

#dashizuke-page .dashizuke-feature-card {
    overflow: hidden;
    border: 1px solid var(--dashizuke-border);
    border-radius: 22px;
    background: var(--dashizuke-white);
    box-shadow: 0 10px 30px rgba(63, 48, 36, 0.07);
}

#dashizuke-page .dashizuke-feature-card > img {
    width: 100%;
    aspect-ratio: 4 / 3;
    object-fit: cover;
}

#dashizuke-page .dashizuke-feature-card-body {
    padding: 26px 25px 30px;
}

#dashizuke-page .dashizuke-feature-number {
    margin: 0 0 8px;
    color: var(--dashizuke-gold);
    font-family: Georgia, serif;
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 0.18em;
}

#dashizuke-page .dashizuke-feature-card h3 {
    margin: 0;
    color: var(--dashizuke-brown-dark);
    font-size: 21px;
    line-height: 1.55;
}

#dashizuke-page .dashizuke-feature-card-body > p:last-child {
    margin: 15px 0 0;
    color: var(--dashizuke-muted);
    font-size: 15px;
}

#dashizuke-page .dashizuke-recommend {
    padding: 86px 0;
    background: var(--dashizuke-ivory);
}

#dashizuke-page .dashizuke-two-column {
    display: grid;
    grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
    gap: 70px;
    align-items: center;
}

#dashizuke-page .dashizuke-check-list {
    display: grid;
    gap: 12px;
    margin: 30px 0 0;
    padding: 0;
    list-style: none;
}

#dashizuke-page .dashizuke-check-list li {
    position: relative;
    padding: 14px 16px 14px 48px;
    border: 1px solid rgba(98, 74, 52, 0.12);
    border-radius: 12px;
    background: rgba(255, 255, 255, 0.72);
}

#dashizuke-page .dashizuke-check-list li::before {
    content: "✓";
    position: absolute;
    top: 13px;
    left: 18px;
    color: var(--dashizuke-green);
    font-weight: 700;
}

#dashizuke-page .dashizuke-howto {
    padding: 36px;
    border: 1px solid #d8cbb9;
    border-radius: 26px;
    background: #fff;
    box-shadow: var(--dashizuke-shadow);
}

#dashizuke-page .dashizuke-howto h3 {
    margin: 0;
    color: var(--dashizuke-brown-dark);
    font-size: 28px;
}

#dashizuke-page .dashizuke-howto-amount {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    margin: 26px 0 0;
    border: 1px solid var(--dashizuke-border);
    border-radius: 14px;
    overflow: hidden;
}

#dashizuke-page .dashizuke-howto-amount div {
    padding: 16px;
    text-align: center;
}

#dashizuke-page .dashizuke-howto-amount div + div {
    border-left: 1px solid var(--dashizuke-border);
}

#dashizuke-page .dashizuke-howto-amount dt {
    color: var(--dashizuke-muted);
    font-size: 12px;
    font-weight: 700;
}

#dashizuke-page .dashizuke-howto-amount dd {
    margin: 5px 0 0;
    color: var(--dashizuke-green);
    font-size: 17px;
    font-weight: 700;
}

#dashizuke-page .dashizuke-step-list {
    display: grid;
    gap: 14px;
    margin: 26px 0 0;
    padding: 0;
    list-style: none;
}

#dashizuke-page .dashizuke-step-list li {
    display: grid;
    grid-template-columns: 38px 1fr;
    gap: 14px;
    align-items: start;
}

#dashizuke-page .dashizuke-step-list span {
    display: flex;
    width: 38px;
    height: 38px;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    color: #fff;
    background: var(--dashizuke-green);
    font-weight: 700;
}

#dashizuke-page .dashizuke-step-list p {
    margin: 4px 0 0;
}

#dashizuke-page .dashizuke-note,
#dashizuke-page .dashizuke-pdf-note {
    margin: 24px 0 0;
    padding: 14px 16px;
    border-left: 4px solid var(--dashizuke-gold);
    background: #faf7f1;
    color: var(--dashizuke-muted);
    font-size: 13px;
}

#dashizuke-page .dashizuke-usage {
    padding: 82px 0;
    background: var(--dashizuke-green);
    color: #fff;
}

#dashizuke-page .dashizuke-usage .dashizuke-section-kicker,
#dashizuke-page .dashizuke-usage .dashizuke-section-heading h2,
#dashizuke-page .dashizuke-usage .dashizuke-section-heading > p:last-child {
    color: #fff;
}

#dashizuke-page .dashizuke-usage-list {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 12px;
}

#dashizuke-page .dashizuke-usage-list span {
    padding: 11px 22px;
    border: 1px solid rgba(255, 255, 255, 0.45);
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.08);
    font-size: 15px;
}

#dashizuke-page .dashizuke-recipes {
    background: #fbfaf7;
}

#dashizuke-page .dashizuke-recipe-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 24px;
}

#dashizuke-page .dashizuke-recipe-card {
    overflow: hidden;
    border: 1px solid var(--dashizuke-border);
    border-radius: 18px;
    background: #fff;
    box-shadow: 0 8px 22px rgba(63, 48, 36, 0.06);
    transition:
        transform 0.22s ease,
        box-shadow 0.22s ease;
}

#dashizuke-page .dashizuke-recipe-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 16px 34px rgba(63, 48, 36, 0.12);
}

#dashizuke-page .dashizuke-recipe-card > a {
    display: block;
    height: 100%;
    text-decoration: none;
}

#dashizuke-page .dashizuke-recipe-image {
    position: relative;
    overflow: hidden;
}

#dashizuke-page .dashizuke-recipe-image img {
    width: 100%;
    aspect-ratio: 4 / 3;
    object-fit: cover;
    transition: transform 0.35s ease;
}

#dashizuke-page .dashizuke-recipe-card:hover .dashizuke-recipe-image img {
    transform: scale(1.035);
}

#dashizuke-page .dashizuke-recipe-category {
    position: absolute;
    left: 14px;
    bottom: 14px;
    padding: 6px 11px;
    border-radius: 999px;
    color: #fff;
    background: rgba(36, 74, 58, 0.92);
    font-size: 12px;
    font-weight: 700;
}

#dashizuke-page .dashizuke-recipe-body {
    padding: 21px 21px 23px;
}

#dashizuke-page .dashizuke-recipe-id {
    margin: 0 0 6px;
    color: var(--dashizuke-gold);
    font-family: Georgia, serif;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.16em;
}

#dashizuke-page .dashizuke-recipe-body h3 {
    margin: 0;
    color: var(--dashizuke-brown-dark);
    font-size: 19px;
    line-height: 1.55;
}

#dashizuke-page .dashizuke-recipe-link {
    display: inline-block;
    margin-top: 13px;
    color: var(--dashizuke-green);
    font-size: 13px;
    font-weight: 700;
}

#dashizuke-page .dashizuke-recipe-link::after {
    content: " ↗";
}

#dashizuke-page .dashizuke-product-info {
    background: #fff;
}

#dashizuke-page .dashizuke-product-layout {
    display: grid;
    grid-template-columns: 330px minmax(0, 1fr);
    gap: 50px;
    align-items: start;
}

#dashizuke-page .dashizuke-product-image {
    display: flex;
    min-height: 430px;
    align-items: center;
    justify-content: center;
    padding: 28px;
    border-radius: 22px;
    background: var(--dashizuke-ivory);
}

#dashizuke-page .dashizuke-product-image img {
    width: 100%;
    max-height: 390px;
    object-fit: contain;
}

#dashizuke-page .dashizuke-table-wrap {
    overflow-x: auto;
}

#dashizuke-page .dashizuke-info-table {
    width: 100%;
    border-collapse: collapse;
    border-top: 1px solid var(--dashizuke-border);
    font-size: 14px;
}

#dashizuke-page .dashizuke-info-table th,
#dashizuke-page .dashizuke-info-table td {
    padding: 18px 20px;
    border-bottom: 1px solid var(--dashizuke-border);
    vertical-align: top;
    text-align: left;
}

#dashizuke-page .dashizuke-info-table th {
    width: 165px;
    color: var(--dashizuke-green);
    background: #f7f8f5;
    font-weight: 700;
}

#dashizuke-page .dashizuke-nutrition {
    margin-top: 40px;
    padding: 30px;
    border: 1px solid var(--dashizuke-border);
    border-radius: 18px;
    background: #fbfaf7;
}

#dashizuke-page .dashizuke-nutrition h3 {
    margin: 0;
    color: var(--dashizuke-brown-dark);
    font-size: 22px;
}

#dashizuke-page .dashizuke-nutrition-unit {
    margin: 4px 0 0;
    color: var(--dashizuke-muted);
    font-size: 12px;
}

#dashizuke-page .dashizuke-nutrition dl {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    margin: 22px 0 0;
    border: 1px solid var(--dashizuke-border);
    border-radius: 12px;
    overflow: hidden;
}

#dashizuke-page .dashizuke-nutrition dl div {
    padding: 16px;
    background: #fff;
    text-align: center;
}

#dashizuke-page .dashizuke-nutrition dl div + div {
    border-left: 1px solid var(--dashizuke-border);
}

#dashizuke-page .dashizuke-nutrition dt {
    color: var(--dashizuke-muted);
    font-size: 12px;
}

#dashizuke-page .dashizuke-nutrition dd {
    margin: 5px 0 0;
    color: var(--dashizuke-brown-dark);
    font-weight: 700;
}

#dashizuke-page .dashizuke-caution {
    padding: 70px 0;
    background: var(--dashizuke-ivory);
}

#dashizuke-page .dashizuke-caution-box {
    display: grid;
    grid-template-columns: 0.8fr 1.2fr;
    gap: 50px;
    align-items: start;
    padding: 40px;
    border: 1px solid #dacdbb;
    border-radius: 22px;
    background: rgba(255, 255, 255, 0.8);
}

#dashizuke-page .dashizuke-caution-box ul {
    margin: 0;
    padding-left: 1.3em;
}

#dashizuke-page .dashizuke-caution-box li + li {
    margin-top: 11px;
}

#dashizuke-page .dashizuke-contact {
    padding: 72px 0;
    color: #fff;
    background: var(--dashizuke-brown-dark);
}

#dashizuke-page .dashizuke-contact-inner {
    display: flex;
    gap: 40px;
    align-items: center;
    justify-content: space-between;
}

#dashizuke-page .dashizuke-contact .dashizuke-section-kicker,
#dashizuke-page .dashizuke-contact h2 {
    color: #fff;
}

#dashizuke-page .dashizuke-contact p:last-child {
    max-width: 720px;
    margin: 16px 0 0;
    color: rgba(255, 255, 255, 0.82);
}

#dashizuke-page .dashizuke-contact .dashizuke-button-primary {
    flex: 0 0 auto;
    border-color: #fff;
    color: var(--dashizuke-brown-dark);
    background: #fff;
}

@media screen and (max-width: 1024px) {
    #dashizuke-page .dashizuke-hero-inner {
        grid-template-columns: 1fr 0.9fr;
        gap: 38px;
    }

    #dashizuke-page .dashizuke-hero-visual {
        min-height: 430px;
    }

    #dashizuke-page .dashizuke-feature-grid,
    #dashizuke-page .dashizuke-recipe-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    #dashizuke-page .dashizuke-two-column {
        gap: 40px;
    }

    #dashizuke-page .dashizuke-product-layout {
        grid-template-columns: 270px minmax(0, 1fr);
        gap: 34px;
    }

    #dashizuke-page .dashizuke-nutrition dl {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    #dashizuke-page .dashizuke-nutrition dl div + div {
        border-left: 0;
    }

    #dashizuke-page .dashizuke-nutrition dl div {
        border-bottom: 1px solid var(--dashizuke-border);
    }
}

@media screen and (max-width: 767px) {
    #dashizuke-page .dashizuke-container {
        width: calc(100% - 28px);
    }

    #dashizuke-page .dashizuke-hero,
    #dashizuke-page .dashizuke-feature,
    #dashizuke-page .dashizuke-recipes,
    #dashizuke-page .dashizuke-product-info {
        padding: 58px 0;
    }

    #dashizuke-page .dashizuke-hero-inner,
    #dashizuke-page .dashizuke-two-column,
    #dashizuke-page .dashizuke-product-layout,
    #dashizuke-page .dashizuke-caution-box {
        grid-template-columns: 1fr;
    }

    #dashizuke-page .dashizuke-hero-inner {
        gap: 36px;
    }

    #dashizuke-page .dashizuke-hero h1 {
        font-size: 34px;
    }

    #dashizuke-page .dashizuke-hero-text {
        font-size: 15px;
    }

    #dashizuke-page .dashizuke-hero-actions {
        display: grid;
        grid-template-columns: 1fr;
    }

    #dashizuke-page .dashizuke-hero-visual {
        min-height: 365px;
    }

    #dashizuke-page .dashizuke-hero-photo {
        width: 92%;
    }

    #dashizuke-page .dashizuke-package-card {
        width: 145px;
        padding: 12px;
    }

    #dashizuke-page .dashizuke-feature-grid,
    #dashizuke-page .dashizuke-recipe-grid {
        grid-template-columns: 1fr;
    }

    #dashizuke-page .dashizuke-howto {
        padding: 26px 20px;
    }

    #dashizuke-page .dashizuke-howto-amount {
        grid-template-columns: 1fr;
    }

    #dashizuke-page .dashizuke-howto-amount div + div {
        border-top: 1px solid var(--dashizuke-border);
        border-left: 0;
    }

    #dashizuke-page .dashizuke-usage {
        padding: 58px 0;
    }

    #dashizuke-page .dashizuke-product-image {
        min-height: 340px;
    }

    #dashizuke-page .dashizuke-info-table th,
    #dashizuke-page .dashizuke-info-table td {
        display: block;
        width: 100%;
        padding: 14px 16px;
    }

    #dashizuke-page .dashizuke-info-table th {
        border-bottom: 0;
    }

    #dashizuke-page .dashizuke-nutrition {
        padding: 22px 16px;
    }

    #dashizuke-page .dashizuke-nutrition dl {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    #dashizuke-page .dashizuke-caution-box {
        gap: 24px;
        padding: 28px 20px;
    }

    #dashizuke-page .dashizuke-contact-inner {
        display: block;
    }

    #dashizuke-page .dashizuke-contact .dashizuke-button {
        width: 100%;
        margin-top: 28px;
    }
}

@media screen and (max-width: 420px) {
    #dashizuke-page .dashizuke-hero h1 {
        font-size: 30px;
    }

    #dashizuke-page .dashizuke-section-heading h2,
    #dashizuke-page .dashizuke-recommend h2,
    #dashizuke-page .dashizuke-caution h2,
    #dashizuke-page .dashizuke-contact h2 {
        font-size: 28px;
    }

    #dashizuke-page .dashizuke-hero-visual {
        min-height: 320px;
    }

    #dashizuke-page .dashizuke-package-card {
        width: 125px;
    }

    #dashizuke-page .dashizuke-nutrition dl {
        grid-template-columns: 1fr;
    }
}

@media print {
    #dashizuke-page .dashizuke-hero-actions,
    #dashizuke-page .dashizuke-contact {
        display: none;
    }

    #dashizuke-page .dashizuke-hero,
    #dashizuke-page .dashizuke-feature,
    #dashizuke-page .dashizuke-recipes,
    #dashizuke-page .dashizuke-product-info {
        padding: 30px 0;
    }

    #dashizuke-page .dashizuke-recipe-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}