@charset "UTF-8";

:root{
    --public-green:#416b53;
    --public-dark:#263d31;
    --public-gold:#bb9b59;
    --public-cream:#f8f5ed;
    --public-border:#dedbd1;
    --public-text:#323532;
    --public-muted:#747871;
}

*{
    box-sizing:border-box;
}

html{
    scroll-behavior:smooth;
}

body{
    margin:0;
    color:var(--public-text);
    background:#fff;
    font-family:
        -apple-system,
        BlinkMacSystemFont,
        "Hiragino Kaku Gothic ProN",
        "Yu Gothic",
        Meiryo,
        sans-serif;
    line-height:1.75;
}

img{
    max-width:100%;
}

a{
    color:inherit;
}

.public-header{
    position:relative;
    z-index:20;
    border-top:5px solid var(--public-green);
    border-bottom:1px solid #e6e4df;
    background:rgba(255,255,255,.98);
}

.public-header-inner{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:30px;
    width:min(1180px,calc(100% - 40px));
    min-height:98px;
    margin:0 auto;
}

.public-logo{
    display:flex;
    flex-direction:column;
    color:var(--public-green);
    text-decoration:none;
}

.public-logo span{
    font-family:Georgia,"Times New Roman",serif;
    font-size:27px;
    letter-spacing:.12em;
}

.public-logo small{
    margin-top:-3px;
    color:#777;
    font-size:10px;
    letter-spacing:.08em;
}

.public-navigation{
    display:flex;
    align-items:center;
    gap:28px;
}

.public-navigation a{
    position:relative;
    padding:36px 0 31px;
    color:#394139;
    font-size:14px;
    text-decoration:none;
}

.public-navigation a::after{
    content:"";
    position:absolute;
    right:0;
    bottom:25px;
    left:0;
    height:2px;
    background:var(--public-green);
    transform:scaleX(0);
    transition:transform .2s ease;
}

.public-navigation a:hover::after{
    transform:scaleX(1);
}

.public-menu-button{
    display:none;
}

.public-breadcrumb{
    display:flex;
    flex-wrap:wrap;
    gap:9px;
    width:min(1120px,calc(100% - 40px));
    margin:22px auto 0;
    color:#7a7d78;
    font-size:12px;
}

.public-breadcrumb a{
    text-decoration:none;
}

.product-hero{
    display:grid;
    grid-template-columns:minmax(0,1.08fr) minmax(360px,.92fr);
    gap:74px;
    width:min(1120px,calc(100% - 40px));
    margin:38px auto 80px;
}

.product-main-image{
    display:flex;
    align-items:center;
    justify-content:center;
    aspect-ratio:1 / .83;
    overflow:hidden;
    border:1px solid #ece9e1;
    background:
        radial-gradient(circle at center,#fff 20%,#f7f4ed 100%);
}

.product-main-image img{
    width:100%;
    height:100%;
    padding:28px;
    object-fit:contain;
    transition:opacity .18s ease;
}

.product-no-image{
    display:flex;
    align-items:center;
    justify-content:center;
    width:100%;
    height:100%;
    color:#9b9d98;
    font-size:14px;
}

.product-thumbnails{
    display:grid;
    grid-template-columns:repeat(5,minmax(0,1fr));
    gap:10px;
    margin-top:12px;
}

.product-thumbnail{
    aspect-ratio:1;
    overflow:hidden;
    padding:3px;
    border:1px solid var(--public-border);
    background:#fff;
    cursor:pointer;
}

.product-thumbnail.is-active{
    border:2px solid var(--public-green);
}

.product-thumbnail img{
    width:100%;
    height:100%;
    object-fit:contain;
}

.product-summary{
    padding-top:15px;
}

.product-category{
    margin:0 0 12px;
    color:var(--public-green);
    font-size:13px;
    font-weight:700;
    letter-spacing:.08em;
}

.product-summary h1{
    margin:0 0 18px;
    color:var(--public-dark);
    font-family:
        "Yu Mincho",
        "Hiragino Mincho ProN",
        serif;
    font-size:37px;
    font-weight:500;
    line-height:1.42;
}

.product-label{
    display:inline-block;
    margin:0 7px 15px 0;
    padding:4px 10px;
    border:1px solid var(--public-green);
    color:var(--public-green);
    font-size:11px;
    font-weight:700;
}

.product-label.limited{
    border-color:#a05e48;
    color:#a05e48;
}

.product-label.seasonal{
    border-color:#ad8c45;
    color:#8a6b28;
}

.product-lead{
    margin:16px 0 25px;
    padding-bottom:24px;
    border-bottom:1px solid var(--public-border);
    font-size:15px;
}

.product-summary-list{
    margin:0;
}

.product-summary-list > div{
    display:grid;
    grid-template-columns:125px minmax(0,1fr);
    gap:18px;
    padding:12px 0;
    border-bottom:1px solid #eceae4;
}

.product-summary-list dt{
    color:#6b706a;
    font-size:13px;
}

.product-summary-list dd{
    margin:0;
    font-weight:600;
}

.product-shop-button{
    display:block;
    margin-top:30px;
    padding:15px 20px;
    color:#fff;
    background:var(--public-green);
    text-align:center;
    text-decoration:none;
    letter-spacing:.08em;
    transition:background .2s ease;
}

.product-shop-button:hover{
    background:var(--public-dark);
}

.product-information{
    padding:72px 20px 85px;
    background:var(--public-cream);
}

.product-information > h2,
.related-products > h2{
    margin:0 0 42px;
    color:var(--public-dark);
    font-family:
        "Yu Mincho",
        "Hiragino Mincho ProN",
        serif;
    font-size:30px;
    font-weight:500;
    text-align:center;
    letter-spacing:.08em;
}

.product-information > h2::after,
.related-products > h2::after{
    content:"";
    display:block;
    width:50px;
    height:2px;
    margin:16px auto 0;
    background:var(--public-gold);
}

.product-information-grid{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:30px;
    width:min(1060px,100%);
    margin:0 auto;
}

.product-info-card,
.product-allergen-section,
.product-notes-section{
    padding:34px;
    border:1px solid #e1ddd2;
    background:#fff;
}

.product-info-card h3,
.product-allergen-section h3,
.product-notes-section h3{
    margin:0 0 22px;
    padding-bottom:12px;
    border-bottom:1px solid var(--public-border);
    color:var(--public-dark);
    font-size:20px;
    font-weight:500;
}

.product-info-card table{
    width:100%;
    border-collapse:collapse;
}

.product-info-card th,
.product-info-card td{
    padding:11px 8px;
    border-bottom:1px solid #eceae4;
    font-size:13px;
    text-align:left;
    vertical-align:top;
}

.product-info-card th{
    width:40%;
    color:#666d66;
    font-weight:500;
}

.product-info-card td{
    font-weight:600;
}

.product-unit{
    margin:-12px 0 10px;
    color:#7b7e79;
    font-size:12px;
    text-align:right;
}

.product-note{
    margin:18px 0 0;
    padding:15px;
    background:#f8f7f3;
    font-size:12px;
}

.product-allergen-section,
.product-notes-section{
    width:min(1060px,100%);
    margin:30px auto 0;
}

.product-allergen-list{
    display:flex;
    flex-wrap:wrap;
    gap:10px;
    margin:0;
    padding:0;
    list-style:none;
}

.product-allergen-list li{
    min-width:78px;
    padding:8px 14px;
    border:1px solid #c8c5bc;
    border-radius:999px;
    background:#faf9f6;
    font-size:13px;
    text-align:center;
}

.product-allergen-note{
    margin:22px 0 0;
    color:#777b76;
    font-size:11px;
}

.product-notes-section p{
    margin:0;
}

.related-products{
    width:min(1120px,calc(100% - 40px));
    margin:0 auto;
    padding:80px 0 90px;
}

.related-product-grid{
    display:grid;
    grid-template-columns:repeat(4,minmax(0,1fr));
    gap:22px;
}

.related-product-card{
    color:inherit;
    text-decoration:none;
}

.related-product-image{
    display:flex;
    align-items:center;
    justify-content:center;
    aspect-ratio:1;
    overflow:hidden;
    border:1px solid #e5e2da;
    background:#faf9f6;
}

.related-product-image img{
    width:100%;
    height:100%;
    padding:16px;
    object-fit:contain;
    transition:transform .25s ease;
}

.related-product-card:hover img{
    transform:scale(1.035);
}

.related-product-category{
    margin:14px 0 5px;
    color:var(--public-green);
    font-size:11px;
}

.related-product-card h3{
    margin:0;
    color:var(--public-dark);
    font-size:16px;
    font-weight:600;
}

.related-product-card > p:last-child{
    margin:5px 0 0;
    color:#777;
    font-size:12px;
}

.public-footer{
    padding:50px 20px 20px;
    color:#e6ece7;
    background:var(--public-dark);
}

.public-footer-inner{
    display:flex;
    justify-content:space-between;
    gap:40px;
    width:min(1120px,100%);
    margin:0 auto;
}

.public-footer strong{
    font-size:17px;
    letter-spacing:.05em;
}

.public-footer p{
    margin:8px 0 0;
    color:#bec8c0;
    font-size:12px;
}

.public-footer nav{
    display:flex;
    flex-wrap:wrap;
    gap:18px;
    align-items:flex-start;
}

.public-footer nav a{
    color:#e6ece7;
    font-size:12px;
    text-decoration:none;
}

.public-copyright{
    width:min(1120px,100%);
    margin:35px auto 0 !important;
    padding-top:18px;
    border-top:1px solid rgba(255,255,255,.12);
    text-align:center;
}

@media(max-width:900px){
    .public-header-inner{
        min-height:80px;
    }

    .public-menu-button{
        display:block;
        padding:8px 12px;
        border:1px solid var(--public-green);
        color:var(--public-green);
        background:#fff;
    }

    .public-navigation{
        position:absolute;
        top:80px;
        right:0;
        left:0;
        display:none;
        padding:10px 20px 25px;
        border-top:1px solid #eee;
        background:#fff;
    }

    .public-navigation.is-open{
        display:grid;
    }

    .public-navigation a{
        padding:12px 0;
        border-bottom:1px solid #eee;
    }

    .product-hero{
        grid-template-columns:1fr;
        gap:35px;
    }

    .product-information-grid{
        grid-template-columns:1fr;
    }

    .related-product-grid{
        grid-template-columns:repeat(2,minmax(0,1fr));
    }
}

@media(max-width:560px){
    .public-header-inner,
    .public-breadcrumb,
    .product-hero,
    .related-products{
        width:calc(100% - 28px);
    }

    .public-logo span{
        font-size:21px;
    }

    .product-summary h1{
        font-size:29px;
    }

    .product-summary-list > div{
        grid-template-columns:100px minmax(0,1fr);
    }

    .product-information{
        padding-right:14px;
        padding-left:14px;
    }

    .product-info-card,
    .product-allergen-section,
    .product-notes-section{
        padding:22px;
    }

    .related-product-grid{
        gap:14px;
    }

    .public-footer-inner{
        flex-direction:column;
    }
}