:root {
    --buono-green: #234638;
    --buono-deep-green: #173329;
    --buono-cream: #f6f0e6;
    --buono-gold: #dca92d;
}

.section-space {
    padding: 6rem 0;
}

.section-heading {
    max-width: 760px;
    margin-bottom: 3rem;
}

.section-heading h2 {
    font-size: clamp(2rem, 4vw, 3.25rem);
    line-height: 1.35;
}

.section-kicker {
    margin-bottom: 0.75rem;
    color: #a26e15;
    font-size: 0.78rem;
    font-weight: 700;
    letter-spacing: 0.18em;
}

.hero-section {
    min-height: 690px !important;
    height: auto !important;
    padding: 6.5rem 0;
    background-position: center !important;
    background-size: cover !important;
}

.hero-overlay {
    background:
        linear-gradient(90deg, rgba(9, 25, 20, 0.9) 0%, rgba(9, 25, 20, 0.62) 52%, rgba(9, 25, 20, 0.18) 100%),
        linear-gradient(0deg, rgba(0, 0, 0, 0.22), rgba(0, 0, 0, 0.06));
}

.hero-content {
    z-index: 2;
}

.hero-logo {
    display: block;
    width: min(380px, 76vw) !important;
    margin: 0;
}

.hero-section h1 {
    line-height: 1.2;
    text-shadow: 0 3px 18px rgba(0, 0, 0, 0.38);
}

.hero-copy {
    max-width: 680px;
    font-size: clamp(1.06rem, 2vw, 1.35rem);
    line-height: 1.9;
}

.demo-label {
    display: inline-flex;
    align-items: center;
    min-height: 32px;
    margin-bottom: 1.4rem;
    padding: 0.35rem 0.9rem;
    border: 1px solid rgba(255, 255, 255, 0.58);
    border-radius: 999px;
    background: rgba(0, 0, 0, 0.28);
    color: #fff;
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.14em;
}

.menu-card-image {
    display: block;
    overflow: hidden;
}

.menu-card-image img,
.menu-card-image .menu-placeholder {
    width: 100%;
    height: 260px;
    object-fit: cover;
    transition: transform 0.45s ease;
}

.menu-card:hover .menu-card-image img {
    transform: scale(1.035);
}

.menu-placeholder {
    display: grid;
    place-items: center;
    background: var(--buono-green);
    color: #fff;
    font-size: 2rem;
    font-weight: 700;
}

.story-image-wrap {
    position: relative;
    min-height: 610px;
    padding: 0 4.5rem 4.5rem 0;
}

.story-image {
    width: 100%;
    height: 610px;
    border-radius: 28px;
    object-fit: cover;
    box-shadow: 0 20px 45px rgba(32, 37, 34, 0.15);
}

.story-image-sub {
    position: absolute;
    right: 0;
    bottom: 0;
    width: 42%;
    aspect-ratio: 1 / 1;
    border: 8px solid #fff;
    border-radius: 24px;
    object-fit: cover;
    box-shadow: 0 16px 34px rgba(32, 37, 34, 0.18);
}

.text-link {
    color: var(--buono-green);
    font-weight: 700;
    text-decoration: none;
}

.text-link:hover {
    color: #a26e15;
}

.atmosphere-section {
    background: var(--buono-cream);
}

.atmosphere-grid {
    display: grid;
    grid-template-columns: 1.2fr 0.8fr;
    grid-template-rows: 270px 270px;
    gap: 1.25rem;
}

.atmosphere-grid img {
    width: 100%;
    height: 100%;
    border-radius: 22px;
    object-fit: cover;
}

.atmosphere-grid img:first-child {
    grid-row: 1 / span 2;
}

.news-thumb {
    display: block;
}

.news-thumb img {
    width: 100%;
    height: 150px;
    object-fit: cover;
}

.demo-reveal {
    padding: 7rem 0;
    background:
        linear-gradient(rgba(21, 49, 39, 0.94), rgba(21, 49, 39, 0.94)),
        url("images/front.webp") center / cover no-repeat;
}

.demo-reveal .lead {
    max-width: 800px;
}

.demo-label-light {
    background: rgba(255, 255, 255, 0.1);
}

.system-section {
    background: #f7f6f2;
}

.system-section .section-heading {
    max-width: 980px;
}

.system-section .section-heading h2 {
    font-size: clamp(2rem, 3.5vw, 3rem);
}

.result-card {
    padding: 2rem;
    border: 1px solid rgba(35, 70, 56, 0.12);
    border-radius: 20px;
    background: #fff;
    box-shadow: 0 10px 30px rgba(22, 46, 37, 0.06);
}

.result-number {
    display: block;
    margin-bottom: 1.1rem;
    color: #c78c25;
    font-size: 0.82rem;
    font-weight: 700;
    letter-spacing: 0.12em;
}

.publish-flow {
    padding: clamp(1.5rem, 4vw, 3.5rem);
    border: 1px solid rgba(35, 70, 56, 0.13);
    border-radius: 28px;
    background: #fff;
    box-shadow: 0 18px 50px rgba(22, 46, 37, 0.08);
}

.device-frame,
.published-preview {
    overflow: hidden;
    border: 1px solid #d9d9d9;
    border-radius: 20px;
    background: #fff;
    box-shadow: 0 14px 34px rgba(22, 46, 37, 0.12);
}

.device-frame img {
    display: block;
    width: 100%;
}

.device-bar {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    min-height: 46px;
    padding: 0 1rem;
    border-bottom: 1px solid #e5e5e5;
    background: #f7f7f7;
    font-size: 0.78rem;
}

.device-bar span {
    width: 9px;
    height: 9px;
    border-radius: 50%;
    background: #d8d8d8;
}

.device-bar strong {
    margin-left: auto;
    color: #555;
}

.flow-arrow {
    color: var(--buono-gold);
    font-family: sans-serif;
    font-size: 4rem;
    font-weight: 700;
}

.published-preview {
    position: relative;
}

.published-preview img {
    height: 280px;
    object-fit: cover;
}

.published-label {
    position: absolute;
    top: 1rem;
    left: 1rem;
    z-index: 2;
    padding: 0.35rem 0.8rem;
    border-radius: 999px;
    background: var(--buono-green);
    color: #fff;
    font-size: 0.75rem;
    font-weight: 700;
}

.final-cta {
    background:
        linear-gradient(110deg, rgba(17, 42, 33, 0.98), rgba(35, 70, 56, 0.92)),
        url("images/front.webp") center / cover no-repeat;
}

.final-cta .lead {
    max-width: 760px;
}

.demo-notice {
    color: rgba(255, 255, 255, 0.72);
    font-size: 0.82rem;
}

@media (max-width: 991.98px) {
    .section-space {
        padding: 4.5rem 0;
    }

    .hero-section {
        min-height: 640px !important;
        padding: 5rem 0;
        background-position: 62% center !important;
    }

    .hero-overlay {
        background: rgba(8, 24, 19, 0.7);
    }

    .story-image-wrap {
        min-height: 520px;
        padding: 0 3rem 3rem 0;
    }

    .story-image {
        height: 520px;
    }

    .flow-arrow {
        transform: rotate(90deg);
    }
}

@media (max-width: 767.98px) {
    .section-space {
        padding: 4rem 0;
    }

    .section-heading {
        margin-bottom: 2.25rem;
    }

    .hero-section {
        min-height: 660px !important;
        padding: 4.25rem 0;
        text-align: center;
    }

    .hero-logo {
        margin-right: auto;
        margin-left: auto;
    }

    .hero-copy {
        font-size: 1rem;
    }

    .menu-card-image img,
    .menu-card-image .menu-placeholder {
        height: 240px;
    }

    .story-image-wrap {
        min-height: 430px;
        padding: 0 2rem 2.5rem 0;
    }

    .story-image {
        height: 430px;
    }

    .story-image-sub {
        width: 45%;
        border-width: 5px;
    }

    .atmosphere-grid {
        grid-template-columns: 1fr 1fr;
        grid-template-rows: 260px 180px;
        gap: 0.75rem;
    }

    .atmosphere-grid img {
        border-radius: 14px;
    }

    .atmosphere-grid img:first-child {
        grid-column: 1 / span 2;
        grid-row: auto;
    }

    .news-thumb img {
        height: 135px;
    }

    .news-summary {
        display: none;
    }

    .demo-reveal {
        padding: 5rem 0;
    }

    .result-card {
        padding: 1.5rem;
    }

    .published-preview img {
        height: 230px;
    }
}

@media (max-width: 399.98px) {
    .hero-section h1 {
        font-size: 2.35rem;
    }

    .hero-section .btn {
        padding-right: 1.25rem !important;
        padding-left: 1.25rem !important;
    }

    .story-image-wrap {
        min-height: 350px;
    }

    .story-image {
        height: 350px;
    }
}

/* 2026-07-29: ワイド画面でもファーストビューを中央に保つ */
.hero-content .row {
    justify-content: center;
}

.hero-content .col-lg-8 {
    text-align: center;
}

.hero-content .hero-logo {
    margin-right: auto;
    margin-left: auto;
}

.hero-content .hero-copy {
    margin-right: auto;
    margin-left: auto;
}

.hero-content .d-sm-flex {
    justify-content: center;
}

/* トップページの最終CTAとフッターを連続させる */
body.home footer {
    margin-top: 0 !important;
}