:root {
    --red:#902014;
    --brown:#624a3c;
    --green:#7c8662;
    --gold:#edc381;
    --ink:#332929;
    --paper:#fffaf2;
    --max:1120px
}
* {
    box-sizing:border-box
}
html {
    scroll-behavior:smooth
}
body {
    margin:0;
    color:var(--ink);
    font:15px/1.85 "Zen Maru Gothic",sans-serif
}
img {
    display:block;
    max-width:100%
}
a {
    text-decoration:none;
    color:inherit
}
header {
    height:64px;
    padding:0 40px;
    background:var(--paper);
    display:flex;
    align-items:center;
    justify-content:space-between;
    position:sticky;
    top:0;
    z-index:20
}
.logo {
    width:79px;
    height:50px
}
.logo img {
    width:100%;
    height:100%;
    object-fit:contain
}
header nav {
    display:flex;
    align-items:center;
    gap:30px;
    font:12px "Rock Salt",cursive
}
header nav a.active {
    color:var(--red)
}
.reservation-button {
    width:290px;
    height:56px;
    padding:0 20px 0 18px;
    background:var(--red);
    color:#fff;
    border:1px solid var(--red);
    display:flex;
    align-items:center;
    justify-content:flex-start;
    gap:12px;
    font:700 15px/1 "Noto Sans JP",sans-serif;
    letter-spacing:0.02em;
    border-radius:3px;
    box-shadow:0 2px 2.5px rgba(58,36,28,.2)
}
.reservation-button img {
    width:18px;
    height:18px;
    flex:none;
    margin-right:0;
    filter:brightness(0) invert(1)
}
.reservation-button b,
.menu-details-link b {
    margin-left:auto
}
.reservation-button-compact {
    width:184px;
    height:44px;
    padding:0 14px;
    font-size:13px
}
.menu-toggle {
    display:none
}
.hero {
    height:640px;
    position:relative;
    display:flex;
    align-items:center;
    overflow:hidden;
    color:#fff
}
.hero-slide {
    position:absolute;
    inset:0;
    background:center/cover;
    opacity:0;
    transform:scale(1.03);
    transition:opacity 1s,transform 6s
}
.hero-slide.is-active {
    opacity:1;
    transform:scale(1)
}
.hero-slide-primary {
    background-image:url("../assets/imgFirstView01.webp")
}
.hero-slide-secondary {
    background-image:url("../assets/imgFirstView02.webp")
}
.hero-overlay {
    position:absolute;
    inset:0;
    background:linear-gradient(90deg,#070707e8,transparent 61%)
}
.hero-text {
    position:relative;
    z-index:2;
    width:500px;
    margin-left:max(70px,calc((100% - 960px)/2))
}
.hero-brand {
    font:32px Georgia,serif;
    margin:0 0 26px
}
.hero h1 {
    font:500 50px/1.3 "Kiwi Maru";
    margin:0 0 18px;
    text-shadow:0 1px 2px #000
}
.hero-text>p:not(.hero-brand) {
    font-weight:700;
    line-height:28px;
    margin:0 0 38px;
    text-shadow:0 1px 3px #000
}
.hero-slider-controls {
    position:absolute;
    right:40px;
    bottom:32px;
    z-index:4;
    display:flex;
    align-items:center;
    gap:12px
}
.hero-slider-controls button {
    cursor:pointer
}
.hero-slider-prev,.hero-slider-next {
    width:34px;
    height:34px;
    border:1px solid #fff8;
    border-radius:50%;
    background:#0003;
    color:#fff
}
.hero-slider-dot {
    width:28px;
    height:3px;
    padding:0;
    border:0;
    background:#fff6
}
.hero-slider-dot.is-active {
    background:#fff
}
.torn-edge {
    position:absolute;
    left:0;
    width:100%;
    height:36px;
    z-index:5
}
.torn-edge.torn-edge-top {
    top:-17px
}
.torn-edge.torn-edge-bottom {
    bottom:-17px
}
.hero::after {
    content:"";
    position:absolute;
    left:0;
    right:0;
    bottom:-17px;
    height:36px;
    z-index:5;
    background-image:url("../assets/imgTornTextureShape-tile.svg"),url("../assets/imgTornTextureShape-tile.svg");
    background-position:left bottom,left -12px bottom;
    background-size:auto 36px,auto 36px;
    background-repeat:repeat-x
}
.paper {
    background:var(--paper) url("../assets/imgAbout.png") center/cover;
    position:relative
}
.section-container {
    width:min(var(--max),calc(100% - 80px));
    margin:auto;
    position:relative;
    z-index:2
}
.handwritten-heading {
    font:42px/1.35 "Rock Salt";
    margin:0;
    color:#222
}
.about {
    width:100%;
    height:700px;
    padding:62px 0 80px;
    padding-top:60px;
    text-align:center
}
.about-leaf {
    position:absolute;
    top:0;
    left:calc(max(0px,calc((100% - 1200px)/2)) - 80px);
    width:350px;
    z-index:1;
    pointer-events:none
}
.about-chef {
    position:absolute;
    right:calc(max(0px,calc((100% - 1200px)/2)) - 80px);
    bottom:0;
    width:400px;
    z-index:1;
    pointer-events:none
}
.about .handwritten-heading {
    font-size:50px
}
.about h2 {
    font:500 26px "Kiwi Maru";
    margin:8px 0 15px
}
.about h2 em {
    color:var(--red);
    font-style:normal
}
.about-description {
    max-width:866px;
    margin:0 auto 26px;
    text-align:left;
    line-height:28px
}
.about-photo-grid {
    width:866px;
    max-width:100%;
    margin:auto;
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:20px
}
.about-photo-grid img {
    width:100%;
    height:257px;
    object-fit:cover
}
.restaurant-features {
    height:272px;
    padding:50px max(40px,calc((100% - 1060px)/2));
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:64px;
    background:var(--brown);
    color:#fff
}
.restaurant-features h3 {
    margin:0 0 10px;
    padding-bottom:5px;
    border-bottom:4px solid var(--gold);
    font:500 25px "Kiwi Maru";
    color:var(--gold);
    white-space:nowrap
}
.restaurant-features i {
    font:38px Georgia;
    margin-right:8px
}
.restaurant-features strong {
    font:500 24px "Kiwi Maru"
}
.restaurant-features p {
    margin:3px 0;
    font-size:15px;
    line-height:1.65
}
.menu {
    height:560px;
    padding:60px 40px;
    position:relative
}
.menu.lunch {
    scroll-margin-top:64px
}
.lunch-decoration {
    position:absolute;
    top:0;
    left:50%;
    width:1200px;
    max-width:100%;
    height:100%;
    transform:translateX(-50%);
    pointer-events:none;
    z-index:1
}
.lunch-decoration img {
    position:absolute;
    left:-100px;
    bottom:0;
    width:340px
}
.dinner-decoration {
    position:absolute;
    top:0;
    left:50%;
    width:1200px;
    max-width:100%;
    height:100%;
    transform:translateX(-50%);
    pointer-events:none;
    z-index:1
}
.dinner-decoration img {
    position:absolute;
    right:-80px;
    bottom:0;
    width:420px
}
.menu-inner {
    width:1100px;
    max-width:100%;
    height:440px;
    margin:auto;
    display:grid;
    grid-template-columns:450px 1fr;
    gap:48px;
    align-items:center;
    position:relative;
    z-index:2
}
.menu-copy .handwritten-heading {
    font-size:52px
}
.text-green {
    color:var(--green)
}
.text-gold {
    color:var(--gold)
}
.text-red {
    color:#a34534
}
.menu-copy h2,.party h2 {
    font:500 26px "Kiwi Maru";
    margin:5px 0 10px
}
.menu-copy>p:not(.handwritten-heading) {
    line-height:28px
}
.menu-feature-image {
    width:100%;
    height:400px;
    object-fit:contain;
    filter:drop-shadow(10px 10px 10px #0004)
}
.menu-details-link {
    width:240px;
    height:48px;
    padding:0 22px;
    margin:22px 0 0 auto;
    display:flex;
    align-items:center;
    color:#fff
}
.dinner .menu-details-link {
    margin-left:0
}
.green-bg {
    background:var(--green)
}
.gold-bg {
    background:#d0a35e;
    color:var(--ink)
}
.red-bg {
    background:var(--red)
}
.dinner {
    background:var(--brown) url("../assets/imgAbout.png") center/cover;
    color:#fff
}
.dinner .menu-inner {
    grid-template-columns:1fr 450px
}
.menu.dinner,
.party {
    scroll-margin-top:64px
}
.party {
    min-height:1100px;
    padding:60px 0 75px;
    text-align:center
}
.party-decoration {
    position:absolute;
    top:0;
    left:50%;
    width:1200px;
    max-width:100%;
    height:100%;
    transform:translateX(-50%);
    pointer-events:none;
    z-index:1
}
.party-decoration img {
    position:absolute;
    top:50px;
    right:-100px;
    width:400px
}
.party-wine-decoration {
    position:absolute;
    left:50%;
    bottom:0;
    width:1200px;
    max-width:100%;
    height:100%;
    transform:translateX(-50%);
    pointer-events:none;
    z-index:1
}
.party-wine-decoration img {
    position:absolute;
    left:-150px;
    bottom:0;
    width:500px
}
.party .handwritten-heading {
    font-size:52px;
    color:#a34534
}
.party>p {
    line-height:28px
}
.party-photo-gallery {
    width:780px;
    max-width:100%;
    margin:30px auto 0;
    display:grid;
    gap:36px
}
.party-photo-gallery img {
    width:100%;
    height:380px;
    object-fit:cover
}
.party .menu-details-link {
    margin:30px calc((100% - 780px)/2) 0 auto
}
.news {
    padding:65px 0 80px;
    scroll-margin-top:64px
}
.news-title {
    display:flex;
    justify-content:space-between;
    align-items:flex-end;
    margin-bottom:28px
}
.news-title p {
    margin:0
}
.news-title img {
    width:150px;
    height:auto
}
.news-grid {
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:14px
}
.news-grid img {
    width:100%;
    height:255px;
    object-fit:cover
}
.news .news-grid {
    display:block
}
.news #sb_instagram #sbi_images {
    display:grid;
    grid-template-columns:repeat(3,minmax(0,1fr));
    gap:14px !important;
    margin:0;
    padding:0
}
.news #sb_instagram .sbi_item {
    display:block;
    float:none;
    width:100% !important;
    margin:0;
    padding:0 !important
}
.news #sb_instagram .sbi_photo_wrap,
.news #sb_instagram .sbi_photo {
    width:100%;
    height:255px
}
.news #sb_instagram .sbi_photo {
    background-size:cover;
    background-position:center
}
.access {
    padding:65px 0 80px;
    scroll-margin-top:64px
}
.access h2 {
    font:500 22px "Kiwi Maru";
    margin:0 0 24px
}
.access-inner {
    display:grid;
    grid-template-columns:450px 1fr;
    gap:48px
}
.access h3 {
    font:500 25px "Kiwi Maru"
}
.access dl {
    font-size:13px
}
.access dl div {
    display:grid;
    grid-template-columns:80px 1fr;
    padding:9px 0;
    border-bottom:1px solid #bbb
}
.access dt {
    color:#a34534;
    font-weight:700
}
.access dd {
    margin:0
}
.access-notice {
    padding:16px;
    background:#f3e8d8;
    font-size:13px;
    line-height:1.7
}
.access-map {
    width:100%;
    height:457px;
    object-fit:cover
}
.contact {
    padding:60px 0;
    background:var(--red);
    color:#fff;
    scroll-margin-top:64px
}
.contact-inner {
    width:948px;
    max-width:calc(100% - 80px);
    margin:auto;
    display:grid;
    grid-template-columns:373px 455px;
    gap:120px
}
.contact .handwritten-heading {
    color:#fff
}
.contact h2 {
    font:500 26px "Kiwi Maru"
}
.contact form {
    display:grid;
    gap:12px
}
.contact label {
    font:500 12px "Noto Sans JP"
}
.contact input,.contact textarea {
    display:block;
    width:100%;
    margin-top:5px;
    padding:10px 12px;
    border:1px solid #ccc
}
.contact input {
    height:43px
}
.contact textarea {
    height:90px
}
.contact button {
    width:150px;
    height:46px;
    border:0;
    background:#fff;
    color:var(--red)
}
footer {
    padding:48px 40px 24px;
    background:var(--brown);
    color:#fff
}
footer>div {
    width:1120px;
    max-width:100%;
    margin:auto;
    display:grid;
    grid-template-columns:284px 284px 284px;
    gap:48px
}
.footer-logo {
    height:158px;
    background:#fff;
    display:block
}
.footer-logo img {
    width:100%;
    height:100%;
    object-fit:contain
}
footer nav {
    display:flex;
    flex-direction:column;
    text-align:left;
    font:12px/26px "Noto Sans JP"
}
footer nav a {
    width:120px;
    margin:auto
}
footer p {
    margin:0;
    font:12px/24px "Noto Sans JP"
}
footer small {
    display:block;
    width:1120px;
    max-width:100%;
    margin:40px auto 0;
    padding-top:20px;
    border-top:1px solid #ddd;
    text-align:center
}
.menu-toggle span {
    position:absolute;
    width:1px;
    height:1px;
    overflow:hidden
}
@media(max-width:1200px) {
    header {
        padding:0 20px
    }
    .menu-toggle {
        display:block;
        border:0;
        background:none
    }
    .menu-toggle i {
        display:block;
        width:24px;
        height:2px;
        margin:5px;
        background:var(--red)
    }
    header nav {
        display:none;
        position:absolute;
        top:64px;
        left:0;
        right:0;
        padding:22px;
        background:var(--paper);
        flex-direction:column;
        gap:8px
    }
    header nav.is-open {
        display:flex
    }
    .hero-text {
        margin:0 8vw;
        width:84vw
    }
    .hero h1 {
        font-size:clamp(34px,7vw,50px)
    }
    .hero-text br {
        display:none
    }
    .about {
        height:auto
    }
    .about-leaf {
        display:none
    }
    .about-chef {
        display:none
    }
    .lunch-decoration {
        display:none
    }
    .dinner-decoration {
        display:none
    }
    .party-decoration {
        display:none
    }
    .party-wine-decoration {
        display:none
    }
    .restaurant-features {
        height:auto;
        grid-template-columns:1fr;
        gap:24px
    }
    .restaurant-features h3 {
        white-space:normal
    }
    .menu {
        height:auto
    }
    .menu-inner,.dinner .menu-inner {
        height:auto;
        grid-template-columns:1fr
    }
    .menu-inner .menu-feature-image {
        order:1
    }
    .menu-inner .menu-copy {
        order:2
    }
    .lunch .menu-copy {
        text-align:center;
        margin-left:auto;
        margin-right:auto
    }
    .lunch .menu-details-link {
        margin-left:auto;
        margin-right:auto
    }
    .dinner .menu-copy {
        text-align:center;
        margin-left:auto;
        margin-right:auto
    }
    .dinner .menu-details-link {
        margin-left:auto;
        margin-right:auto
    }
    .party {
        min-height:0
    }
    .party-photo-gallery img {
        height:auto
    }
    .party .menu-details-link {
        margin:28px auto 0
    }
    .access-inner,.contact-inner {
        grid-template-columns:1fr
    }
    .contact-inner {
        gap:40px
    }
    footer>div {
        grid-template-columns:1fr 1fr
    }
    .footer-logo {
        grid-column:span 2
    }
}
@media(max-width:600px) {
    .hero {
        height:calc(100svh - 64px);
        min-height:600px
    }
    .hero-text {
        margin:0 24px;
        width:auto
    }
    .hero-brand {
        font-size:24px
    }
    .hero h1 {
        font-size:34px
    }
    .hero-text>p:not(.hero-brand) {
        font-size:14px
    }
    .hero-slider-controls {
        right:20px
    }
    .section-container {
        width:calc(100% - 40px)
    }
    .about .handwritten-heading {
        font-size:29px
    }
    .about h2 {
        font-size:21px
    }
    .about-photo-grid {
        grid-template-columns:1fr
    }
    .about-photo-grid img {
        height:220px
    }
    .restaurant-features {
        padding:45px 24px
    }
    .menu {
        padding:50px 24px 80px
    }
    .menu-inner {
        gap:20px
    }
    .menu-details-link {
        margin:24px auto 0
    }
    .menu-feature-image {
        height:300px
    }
    .party .handwritten-heading {
        font-size:42px
    }
    .news-title img {
        width:100px
    }
    .news-grid {
        grid-template-columns:1fr 1fr;
        gap:8px
    }
    .news-grid img {
        height:145px
    }
    .access-inner {
        grid-template-columns:1fr
    }
    .access-map {
        height:457px
    }
    .contact-inner {
        max-width:calc(100% - 40px)
    }
    .contact button {
        width:100%
    }
    footer>div {
        grid-template-columns:1fr
    }
    .footer-logo {
        grid-column:auto
    }
    footer nav a {
        margin:0
    }
}
@media(max-width:900px) {
    .news #sb_instagram #sbi_images {
        grid-template-columns:repeat(2,minmax(0,1fr))
    }
}
@media(max-width:600px) {
    .news #sb_instagram #sbi_images {
        grid-template-columns:repeat(2,minmax(0,1fr));
        gap:8px !important
    }
    .news #sb_instagram .sbi_photo_wrap,
    .news #sb_instagram .sbi_photo {
        height:145px
    }
}
/* Figma layer fidelity: keep color, texture and transparent ornaments separate. */
.restaurant-features {
    position:relative;
    isolation:isolate;
    background:#786553;
    overflow:visible
}
.restaurant-features:before {
    content:"";
    position:absolute;
    inset:0;
    z-index:-1;
    background:url("../assets/point-wood.png") center/cover no-repeat;
    opacity:.3;
    pointer-events:none
}
.restaurant-features article {
    position:relative;
    z-index:1
}
.dinner {
    isolation:isolate;
    overflow:visible;
    background:#624A3C
}
.dinner:before {
    content:"";
    position:absolute;
    inset:0;
    z-index:0;
    background:url("../assets/imgAbout.png") center/cover no-repeat;
    opacity:.14;
    mix-blend-mode:soft-light;
    pointer-events:none
}
.lunch,.party {
    overflow:visible
}
.menu .menu-inner,.party>.section-container {
    z-index:2
}
/* Figma: #624A3C base with the paper texture multiplied over it. */
.dinner {
    background-color:#624A3C;
    background-image:url("../assets/imgAbout.png");
    background-position:center;
    background-size:cover;
    background-repeat:no-repeat;
    background-blend-mode:multiply
}
.dinner:before {
    display:block;
    background:rgba(20,8,0,.14);
    opacity:1;
    mix-blend-mode:normal
}
.dinner::after {
    content:"";
    position:absolute;
    left:0;
    right:0;
    top:-17px;
    height:36px;
    z-index:5;
}

/* Keep the lower Dinner edge visible over the following Party section. */
.dinner {
    z-index:1
}
.party > .torn-edge.torn-edge-top {
    top:-19px;
    bottom:auto;
    background-image:url("../assets/imgTornTextureShape2-tile.svg"),url("../assets/imgTornTextureShape2-tile.svg");
    background-position:left bottom,left -12px bottom;
    background-size:auto 36px,auto 36px;
    background-repeat:repeat-x;
    pointer-events:none
}